JavaScript、jQueryでチェックボックスを全部チェックする

JavaScript、jQueryでチェックボックスを全部チェックする
1. 関連

JavaScript、jQueryでチェックボックスを全部チェックする

JavaScriptでチェックボックスを全部チェックするにはdocument.all.name属性.lengthでチェックボックス分ループしてチェックしていきます。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test(){
 for(var i=0;i<document.all.chk.length;i++){
   document.all.chk[i].checked = true;
 }
}
</script>
</head>
<body>

<table id="hoge" border="1">
 <tr>
 <td>
 <input type="checkbox" name="chk">
 </td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" name="chk">
 </td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" name="chk">
 </td>
 </tr>
</table>
<input type="button" value="全チェック" onClick="test();">
</body>
</html>

デモです。

では、jQueryでチェックボックスを一括変更してみます。attrとremoveAttrを使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- コーディング部分 -->
<script type="text/javascript">
$(function(){
  $("#all").click(function() {
    if(this.checked){
      $('#check input').attr('checked','checked');
    }else{
      $('#check input').removeAttr('checked');
    }
  });
});
</script>
<!-- コーディング部分 -->
</head>
<body>
<p>
<input type="checkbox" id="all" />一括
</p>
<div id="check">
<input type="checkbox" id="aa" />りんご
<input type="checkbox" />みかん
<input type="checkbox" />めろん
</div>
</body>
</html>

デモです。

デモを動かしてみるとわかると思いますが、チェックボックスの動きが変です。最初の1回目だけチェックオンできますが、2回目以降チェックできません。

正確には、チェックボックスのオンオフはpropを使用しないといけません。jQueryのバージョンによってはattrとremoveAttrでは正しく動作しません。

以下、propを使用した例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- コーディング部分 -->
<script type="text/javascript">
$(function(){
  $("#all").click(function() {
    if(this.checked){
      $('#check input').prop('checked',true);
    }else{
      $('#check input').prop('checked',false);
    }
  });
});
</script>
<!-- コーディング部分 -->
</head>
<body>
<p>
<input type="checkbox" id="all" />一括
</p>
<div id="check">
<input type="checkbox" id="aa" />りんご
<input type="checkbox" />みかん
<input type="checkbox" />めろん
</div>
</body>
</html>

デモです。