[jq-5.html]
jQueryでチェックボックスのチェック状態を取得する – JavaScript
<body>
<p>あなたの好きな動物は？（複数可）</p>
<input type="checkbox" value="イヌ">イヌ<br>
<input type="checkbox" value="ネコ">ネコ<br>
<input type="checkbox" value="ウサギ">ウサギ<br>
<input type="checkbox" value="ハムスター">ハムスター<br>
<input type="checkbox" value="熱帯魚">熱帯魚<br>
<input type="checkbox" value="他">この中には無い<br>
<input type="button" value="確認" onclick="boxCheck()">
</body>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
function boxCheck(){
//チェックされた項目を記録する変数
var str = "";
//eachメソッドでチェックボックスを１つずつ確認
$('[type="checkbox"]').each(function(index, elem){
//チェックされているか確認する
if($(elem).prop('checked')){
//変数strが空でない時、区切りのコンマを追加する
if( str != "" ) str = str + "," ;
//チェックボックスのvalue値を変数strに入れる
str += $(elem).val();
}
});
//strが空の時、警告を出す
if( str == "" ){
alert( "どれか選択してください。" );
}else{
alert( str + "が選択されました。" );
}
}
</script>
コメントを残す