「jQuery入門」チェックボックスを操作する方法

2019年10月14日

1.htmlコード
<p><input type="checkbox" name="confrim" value="prop" id="kdfAa">：prop</p>
<p><input type="checkbox" name="confirm" value="val" id="kdfBb">：val</p>

<!–結果出力–>
<p id="outAa"></p>
<p id="outBb"></p>

2.jQueryコード
$(function() {

// チェックボックスをチェックしたら発動
$('input[name="confirm"]’).change(function() {

// チェックの状態を取得
var prop = $('#kdfAa’).prop('checked’);
var val = $('#kdfBb:checked’).val();

// チェック状態だったら
if (prop) {
$('#outAa’).text('propでチェック’);
} else {
$('#outAa’).text(");
}

// チェック状態だったら
if (val) {
$('#outBb’).text('valでチェック’);
} else {
$('#outBb’).text(");
}

});
});