今回は checkbox の操作方法について説明します。
先ずは checkbox がチェックされているかを設定・取得するための prop 関数の説明をします。
指定された要素に対して「属性名」のみを引数にすると、属性値が返されます。 また、「属性名」「属性値」を引数にすると対象の「属性名」に指定した「属性値」設定されます。
var v = $('要素').prop('属性名'); // 属性値が返る
$('要素').prop('属性名', 属性値); // 属性値の設定
これを使った例として以下に HTML ファイル側のソースを示します。
■prop を使った例
<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--script src="./jquery-3.4.1.min.js"></script--><!-- IEの場合はこちら -->
<script type="text/javascript">
// 初期処理
$(function(){
// 全てのチェックボックスをOFF
$('#chk1').prop('checked', false);
$('#chk2').prop('checked', false);
$('#chk3').prop('checked', false);
});
//ON/OFF関数
function getData() {
var strMsg = "チェック内容\n";
// 各チェック判定
if($('#chk1').prop('checked')){
// チェックONの場合、自分の親のオブジェクトのTEXT取得
strMsg += $('#chk1').parent().text() + "\n";
}
if($('#chk2').prop('checked')){
strMsg += $('#chk2').parent().text() + "\n";
}
if($('#chk3').prop('checked')){
strMsg += $('#chk3').parent().text() + "\n";
}
alert(strMsg);
return false;
}
</script>
</head>
<body>
<h2>test checkbox</h2>
<label><input id="chk1" type="checkbox" value="1" />チェック1</label>
<label><input id="chk2" type="checkbox" value="2" />チェック2</label>
<label><input id="chk3" type="checkbox" value="3" />チェック3</label>
<br />
<button onclick="getData();">状態取得</button>
</body>
</html>
9行目の $(function(){ ... }); の部分は JQuery で初期処理を記述する時の一般的な方法です。
この関数内に記述された処理が、全てのHTMLソース（DOM）を読込んだ後で実行されます。
この例では全ての checkbox の checked 属性を false に設定しています。
ボタンクリック時に全ての checkbox のチェック状態を取得し、チェックされている場合に 各 checkbox の親の label の要素のテキストを取得しています。
各 checkbox は label タグで囲まれているのですが、これはチェックボックスの右側のテキスト（”チェック1”など）を クリックしてもチェックボックス自身をクリックしたことと同様に動作します。 （四角いボックスだけしか効かないと不便なので）
チェックボックス3個の処理をべた書きしましたが、もう少し JQuery 的な方法で記述してみます。
■prop を使った例２
<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);
});
//ON/OFF取得関数
function getData() {
var strMsg = "チェック内容\n";
// 選択済チェックボックス
$('input[type="checkbox"]:checked').each(function() {
strMsg += $(this).parent().text() + "\n";
});
alert(strMsg);
return false;
}
</script>
</head>
<body>
<h2>test checkbox</h2>
<label><input id="chk1" type="checkbox" value="1" />チェック1</label>
<label><input id="chk2" type="checkbox" value="2" />チェック2</label>
<label><input id="chk3" type="checkbox" value="3" />チェック3</label>
<br />
<button onclick="getData();">状態取得</button>
</body>
</html>
初期処理のセレクタはタグ名が input でかつ type 属性が "checkbox" と一致するものが対象となります。
ON/OFF取得関数のセレクタはタグ名が input でかつ type 属性が "checkbox" でチェックされているものが対象となります。
セレクタの書き方を工夫すれば簡単な記述になります。パッと見は分かりづらいですが慣れだと思います。
コメント