[2020/02/06] JavaScript jQueryを使った checkbox の操作方法・その2(チェック件数) (No.148)
[2020/01/06] JavaScript IE では関数のデフォルト引数が動作しない (No.147)
[2019/12/06] JavaScript jQueryで password 入力を見える様にする方法 (No.144)
[2019/11/19] JavaScript jQueryでFileReaderを使いcanvasに画像ファイルを表示する方法 (No.139)
[2019/11/16] JavaScript jQueryでcanvasを使い画像ファイルを表示する方法 (No.138)
-
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
-
今回は checkbox がチェックされている状態のものを全てカウントする方法について説明します。
以下のソースは以下の記事を少し変更したものです。
⇒JavaScript jQueryを使った checkbox の操作方法■チェック件数取得
<html> <head> <meta charset="utf-8"> <title>test checkbox</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // 初期処理 $(function(){ // 全てのチェックボックスをOFF $('input[type="checkbox"]').prop('checked', false); }); // チェック件数取得関数 function getCountChk() { var intCnt = 0; // 選択済チェックボックス $('input[type="checkbox"]:checked').each(function() { intCnt += 1; }); alert("チェック件数:" + intCnt); return false; } </script> </head> <body> <h2>test checkbox</h2> <label><input id="chk1" type="checkbox" value="1" />チェック1</label><br /> <label><input id="chk2" type="checkbox" value="2" />チェック2</label><br /> <label><input id="chk3" type="checkbox" value="3" />チェック3</label><br /> <br /> <button onclick="getCountChk();">チェック件数取得</button> </body> </html>
16行目の $('input[type="checkbox"]:checked').each の部分でチェックされている全てのチェックボックスを列挙して カウントしています。 これは非常にベタな方法で、個別に処理する必要が無ければ、以下の様にした方がより簡単にできます。
■チェック件数取得その2
<html> <head> <meta charset="utf-8"> <title>test checkbox</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // 初期処理 $(function(){ // 全てのチェックボックスをOFF $('input[type="checkbox"]').prop('checked', false); }); // チェック件数取得関数 function getCountChk() { // 選択済チェックボックス var intCnt = $('input[type="checkbox"]:checked').length; alert("チェック件数:" + intCnt); return false; } </script> </head> <body> <h2>test checkbox</h2> <label><input id="chk1" type="checkbox" value="1" />チェック1</label><br /> <label><input id="chk2" type="checkbox" value="2" />チェック2</label><br /> <label><input id="chk3" type="checkbox" value="3" />チェック3</label><br /> <br /> <button onclick="getCountChk();">チェック件数取得</button> </body> </html>
入力画面でグループが異なるチェックボックスを設置することがありますので、その方法について例を示します。 以下の例では、上のソース15行目の $('input[type="checkbox"]:checked').length の部分で name 属性でアクセスする様に変更しています。
■チェック件数取得その3
<html> <head> <meta charset="utf-8"> <title>test checkbox</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // 初期処理 $(function(){ // 全てのチェックボックスをOFF $('input[type="checkbox"]').prop('checked', false); }); // チェック件数取得関数 function getCountChk(strName) { // 選択済チェックボックス var intCnt = $('input[name="' + strName + '[]"]:checked').length; alert("チェック件数:" + intCnt); return false; } </script> </head> <body> <h2>test checkbox 1</h2> <label><input name="chk1[]" type="checkbox" value="1" />チェック1-1</label><br /> <label><input name="chk1[]" type="checkbox" value="2" />チェック1-2</label><br /> <label><input name="chk1[]" type="checkbox" value="3" />チェック1-3</label><br /> <br /> <button onclick="getCountChk('chk1');">チェック件数取得</button> <br /> <br /> <h2>test checkbox 2</h2> <label><input name="chk2[]" type="checkbox" value="10" />チェック2-1</label><br /> <label><input name="chk2[]" type="checkbox" value="20" />チェック2-2</label><br /> <label><input name="chk2[]" type="checkbox" value="30" />チェック2-3</label><br /> <br /> <button onclick="getCountChk('chk2');">チェック件数取得</button> </body> </html>
PR -
最近はまったことですが IE(Internet Explorer) では関数のデフォルト引数が動作しないことです。
比較的規模の大きい PHP がらみのプログラムで IE では全く JavaScript の部分が動かなくなったのです。 非常にあせってしまって、何が原因かがよくわからなったのですが、どうもデフォルト引数の宣言の関数があると全ての JavaScript の関数が 動かなくなる様です。
IE 以外のブラウザでは JavaScript の関数の引数で =(イコール) を後ろに付けてデフォルト値を設定できます。 この関数を呼出す時に指定なしを記述できます。
例として以下のソースを見て下さい。 IE 以外のブラウザでは、それぞれのボタンをクリックした時にメッセージが表示されます。 しかし IE では、うんともすんとも何も実行されません。
■関数にデフォルト引数がある例
<html> <head> <meta charset="utf-8"> <title>test func</title> <script type="text/javascript"> function doTest(msg = 'test message') { alert('Test:' + msg); } </script> </head> <body> <h2>test func</h2> <br /> <button onclick="doTest();">Test</button><br /> <button onclick="doTest('aaaa');">Test</button> </body> </html>
そこで、以下の様にデフォルト引数を止めてみました。
当然のことながら、IE でも関数が動作することが分かります。
■関数にデフォルト引数を止める
<html> <head> <meta charset="utf-8"> <title>test func</title> <script type="text/javascript"> function doTest(msg) { alert('Test:' + msg); } </script> </head> <body> <h2>test func</h2> <br /> <button onclick="doTest('test message');">Test</button><br /> <button onclick="doTest('aaaa');">Test</button> </body> </html>
MDN docs ではちゃんと IE はデフォルト引数は実装されていないと載っていました。
⇒https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters
どうしてもデフォルト引数が必要な場合は以下の様にすれば動きます。
■無理やり関数にデフォルト引数
<html> <head> <meta charset="utf-8"> <title>test func</title> <script type="text/javascript"> function doTest(msg) { if(typeof msg === 'undefined') { msg = 'test message'; } alert('Test:' + msg); } </script> </head> <body> <h2>test func</h2> <br /> <button onclick="doTest();">Test</button><br /> <button onclick="doTest('aaaa');">Test</button> </body> </html>
-
HTML で用意されているパスワード入力に input type="password" があるのですが、 この入力では通常入力内容が ●●●●… と表示されます。
これを見える様にしたいと思います。
よくあるのはパスワード入力の下にチェックボックスを設置し、チェックされていない時は通常で、 チェックされた場合に内容を表示させるやり方です。
方法はパスワード入力の type 属性を password から text に変更します。 これで input がパスワード入力から普通のテキスト入力に変わり、入力内容が見えることになります。
■チェックボックスの変化時にパスワード入力を可視化
<html> <head> <meta charset="utf-8"> <title>test canvas</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(function() { //チェックボックスの変化時関数 $("#password-check").change(function() { if ($(this).prop("checked")) { //チェックONの場合 $("#password-test").attr("type","text"); } else { //チェックOFFの場合 $("#password-test").attr("type","password"); } }); }); </script> </head> <body> <h2>test password</h2> <input type="password" id="password-test" name="Password" value="" placeholder="パスワード入力" /><br /> <label>パスワードを表示する<input type="checkbox" id="password-check" /></label> </body> </html>
以下のパスワード入力に文字を入れてみて下さい。 その後で、チェックボックスをON/OFFすることでパスワードの中身が見えると思います。
-
FileReader オブジェクトを使うと、ローカルなコンピューター内にある画像ファイルをウェブアプリケーションから非同期的に読み込むことが出来ます。 今回はこの FileReader を使って canvas に画像ファイルを描画する方法について説明します。 尚、画像ファイルの指定は input タグで type="file" とします。
処理の手順は以下の通りです- FileReader を生成画像の描画
- FileReader の readAsDataURL メソッドでファイル読込
- FileReader の onload イベントで canvas への画像表示関数の実行
■FileReaderを使いcanvasに画像ファイルを表示
<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //Image関数 function drawImage(imageFile) { var canvas = $("#canvas"); var ctx = canvas[0].getContext("2d"); //イメージオブジェクト var img1 = new Image(); //画像ファイル指定でファイル読込開始 img1.src = imageFile; //画像ロード後に画像を描画できる。 img1.onload = function(){ //画像の大きさを設定 width = img1.width; height = img1.height; canvas.attr('width' , width); canvas.attr('height', height); //画像を描画 ctx.drawImage(img1, 0, 0, width, height); } return false; } //ページロード時イベント宣言 $(function() { var file = null; // 選択されるファイル //ファイル選択時イベント宣言 $("input[type=file]").change(function() { //ファイルを取得 file = $(this).prop("files")[0]; //FileReader API var reader = new FileReader(); //ファイルロード終了時イベント宣言 reader.onload = function(e) { //画像表示関数コール drawImage(e.target.result); }; //fileを読込の開始 reader.readAsDataURL(file); }); }); </script> </head> <body> <h2>test canvas</h2> <canvas id="canvas" width="100" height="100" ></canvas> <br /> <input type="file" accept="image/*" /> </body> </html>
-
今回は HTML5 で用意されている canvas を使って画像ファイルを描画する方法について説明します。 canvas の使い方ですが、以下の様に順を追って説明します。
■画像の描画
直線の描画を行う為のコンテキストオブジェクトのメソッドは以下のものがあります。
メソッド 書式 説明 drawImage drawImage(image, x, y)
image:画像オブジェクト
x:描画開始の x 座標
y:描画開始の y 座標シンプルな描画 drawImage drawImage(image, x, y, dWidth, dHeight)
image:画像オブジェクト
x:描画開始の x 座標
y:描画開始の y 座標
dWidth:描画する横幅
dHeight:描画する縦幅描画開始位置と縮小幅を指定した描画 drawImage drawImage(image, sx, sy, sWidth, sHeight,
dx, dy, dWidth, dHeight)
image:画像オブジェクト
sx:描画元の x 座標
sy:描画元の y 座標
sWidth:描画する元画像の横幅
sHeight:描画する元画像の縦幅
dx:描画開始の x 座標
dy:描画開始の y 座標
dWidth:描画する横幅
dHeight:描画する縦幅元画像の取り出し位置と幅、及び描画開始位置と幅指定 上記の drawImage の3種類の例として以下のソースを示します。
尚、今回使用した画像ファイルは以下の様なものです。この処理の肝は、イメージオブジェクトへの画像ファイルを指定しす直後には描画処理を行わないことです。
画像ファイルの読込には時間が掛かるので、ファイルのロードが終わったタイミングで描画処理をする必要があります。
ソース上では img1.src = の直後に img1.onload がありますので、勘違いされないないように。
img1.onload ではロード直後に呼ばれる関数を宣言しています。 (実際のファイルロード後この関数が実行されます)<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //Image関数 function drawImage(iSwitch) { var canvas = $("#canvas"); var ctx = canvas[0].getContext("2d"); //イメージオブジェクト var img1 = new Image(); //画像ファイル指定でファイル読込開始 img1.src = "./canvastest1.jpg"; //画像ロード後に画像を描画できる。 img1.onload = function(){ //画像の大きさを設定 width = img1.width; height = img1.height; canvas.attr('width' , width); canvas.attr('height', height); //画像を描画 switch (iSwitch) { case 1: ctx.drawImage(img1, 0, 0); break; case 2: ctx.drawImage(img1, 50, 50, 100, 100); break; case 3: ctx.drawImage(img1, 0, 0, 150, 150, 10, 10, 150, 150); break; } } return false; } </script> </head> <body> <h2>test canvas</h2> <canvas id="canvas" width="200" height="200" ></canvas> <br /> <button onclick="drawImage(1);">開始座標指定のみ</button> <button onclick="drawImage(2);">開始座標,幅指定</button> <button onclick="drawImage(3);">元画像,描画先の指定</button> </body> </html>
■画像の大きさにcanvasを合わせる描画
画像の大きさに合わせて canvas の横と縦の幅を合わせる例を示します。
<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //Image関数 function drawImage(imageFile) { var canvas = $("#canvas"); var ctx = canvas[0].getContext("2d"); //イメージオブジェクト var img1 = new Image(); //画像ファイル指定でファイル読込開始 img1.src = imageFile; //画像ロード後に画像を描画できる。 img1.onload = function(){ //画像の大きさを設定 width = img1.width; height = img1.height; canvas.attr('width' , width); canvas.attr('height', height); //画像を描画 ctx.drawImage(img1, 0, 0, width, height); } return false; } </script> </head> <body> <h2>test canvas</h2> <canvas id="canvas" width="200" height="200" ></canvas> <br /> <button onclick="drawImage('./canvastest1.jpg');">Image1</button> <button onclick="drawImage('./canvastest2.jpg');">Image2</button> </body> </html>
「Image1」をクリックすると上記の画像が表示され、「Image2」をクリックすると少し大きい画像が表示されます。
■ページロード直後の描画
画像ファイルの表示には Img タグを使えばいいのですが、javascript による描画をしたい時があります。 その場合にはページがロードされた直後に canvas への画像を行います。
上記の画像表示関数を流用すれば特に難しくなく、ページロード時の $(function() { でその描画関数を呼出せば行えます。<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //Image関数 function drawImage() { var canvas = $("#canvas"); var ctx = canvas[0].getContext("2d"); //イメージオブジェクト var img1 = new Image(); //画像ファイル指定でファイル読込開始 img1.src = "./canvastest1.jpg"; //画像ロード後に画像を描画できる。 img1.onload = function(){ //画像の大きさを設定 width = img1.width; height = img1.height; canvas.attr('width' , width); canvas.attr('height', height); //画像を描画 ctx.drawImage(img1, 0, 0, width, height); } return false; } $(function() { //描画関数をCALL drawImage(); }); </script> </head> <body> <h2>test canvas</h2> <canvas id="canvas" width="200" height="200" ></canvas> </body> </html>