jQueryのあなたは下のリンクで見ることができるように「を選択し、すべての」チェックボックスをクリックすると、私はこのためのjQueryを使用していたら、私はページ上のすべてのチェックボックスを選択しようとしているチェックボックス

Question

「すべてを選択」：

http://jsfiddle.net/priyam/K9P8A/

を

すべてのチェックボックスを選択し、選択解除するためのコードがある：1日のためにそれで立ち往生した後

function selectAll() { 
    $('.selectedId').attr('checked', isChecked('selectall')); 
} 

function isChecked(checkboxId) { 
    var id = '#' + checkboxId; 
    return $(id).is(":checked"); 
} 

、私はまだ、なぜ私はそれが仕事を得る傾けることを確認していません。

Answer 1

Your fiddle works after I made 3 fixes助けてください：

• jQueryの（左上のメニュー）
• 代わりに使用attrのpropの行方不明isChecked機能の
• ほかの輸入は、ボックスをチェックする

Answer 2

メソッドselectAllはグローバルスコープでは使用できないためです。

左パネルFrameworks and Extensionsの2番目のドロップダウンで、no -wrap head/bodyを選択すると正常に動作します。

デフォルトがonloadである理由が選択され、オンロードが選択された場合、入力されたすべてのスクリプトは以下のような無名関数の中にラップされます。 selectAllは、匿名関数内でローカルメソッドとして機能するため、グローバルスコープを使用するonclickイベントハンドラは、Uncaught ReferenceError: selectAll is not definedエラーを引き起こすメソッドにアクセスしません。

$(window).load(function(){ 
    //Entered script 
}); 

デモ：Fiddle

更新 しかし、あなたは

$(function(){ 
    $('#selectall').click(function(i, v){ 
     $('.selectedId').prop('checked', this.checked); 
    }); 

    var checkCount = $('.selectedId').length; 
    $('.selectedId').click(function(i, v){ 
     $('#selectall').prop('checked',$('.selectedId:checked').length == checkCount) 
    }); 
}); 

として、それを簡素化し、this demo

Answer 3

これがすべきのように入力要素からすべてのonclickハンドラを削除することができますあなたのためのトリックを行う。

$(document).ready(function() { 
    $('#selectall').click(function() { 
     var checked = $(this).is(':checked');    
     $('.selectedId').each(function() { 
      var checkBox = $(this);    
      if (checked) { 
       checkBox.prop('checked', true);     
      } 
      else { 
       checkBox.prop('checked', false);     
      } 
     }); 

    }); 
}); 

JsFiddle http://jsfiddle.net/Ra3uL/

Answer 4

使用この...

$('#selectall').on('click', function() { 
    $('.selectedId').attr('checked', $(this).is(":checked")); 
}); 

AnがこのDEMO

Answer 5

は、なぜあなたはこのようにそれをしない参照してください？

$('#selectall').click(function() { 
    $('.selectedId').prop('checked', this.checked); 
}); 

$('.selectedId').change(function() { 
    var check = ($('.selectedId').filter(":checked").length == $('.selectedId').length); 
    $('#selectall').prop("checked", check); 
}); 

DEMO

Answer 6

親のチェックボックスを想定がmainselectのクラスを持っており、すべての子が持つすべてのチェックボックスとその逆を選択しますchildselect

次に選択する親のクラスを持って、より明確で読みやすいです以下のコード：

$('#mainselect').live('change',function(){ 
if($(this).attr('checked') == 'checked') { 
    $('.childselect').attr('checked','checked'); 
} else { 
    $('.childselect').removeAttr('checked'); 
} 
}); 

Answer 7

$（関数（）{

// add multiple select/deselect functionality 
$("#selectall").click(function() { 
     $('.case').attr('checked', this.checked); 
}); 

// if all checkbox are selected, check the selectall checkbox 
// and viceversa 
$(".case").click(function(){ 

    if($(".case").length == $(".case:checked").length) { 
     $("#selectall").attr("checked", "checked"); 
    } else { 
     $("#selectall").removeAttr("checked"); 
    } 

}); 

}）;

Answer 8

$(document).ready(function() { 
    $('#selectall').click(function() { 
     $('.selectedId').prop('checked', $(this).is(":checked")); 
    }); 
}); 

more Optimized 

Answer 9

@letiagoalves溶液に小さな改善、あなたのチェックボックスをクリックしてイベントに関連付けられた特定の処理を持っている場合。 OPによって頼まれていないが、私が過去にしなければならなかったこと。基本的には、各従属チェックボックスのチェックされたプロパティを直接設定するのではなく、各従属チェックボックスのチェックされた状態をselectallチェックボックスと比較し、反対の状態のクリックイベントをトリガします。

$('#selectall').click(function() { 
    var parentState = $(this).prop('checked'); 
    $('.selectedId').each(function() { 
     if ($(this).prop('checked') !== parentState) { 
      $(this).trigger("click"); 
     } 
}); 
}); 

DEMO：

$('#chk-all-items').click(selectAll); 

をしてから、この機能はすべて、または選択解除を選択するのに十分でなければならない：https://jsfiddle.net/jajntuqb/2/

Answer 10

あなたは、単に選択し、すべてのチェックボックスをクリックしてイベントにハンドル機能を追加することができますすべて。

selectAll = function (event) { 
     var self = this; 
     $('.template-item-select').each(function() { 
      this.checked = self.checked; 
     }); 
    } 

Answer 11

より具体的な解決策：

$(document).ready(function(){ 
 
    $('#checkAll').on('click', function (e) { 
 
    $('input[name="chck_box[]"]').prop('checked', $(this).is(':checked')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <th><input type="checkbox" id="checkAll"></th> 
 
    <th>Name</th> 
 
    <th>Last</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td><input type="checkbox" name="chck_box[]" value="1"></td> 
 
     <td>Joe</td> 
 
     <td>Doe</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" name="chck_box[]" value="2"></td> 
 
     <td>John</td> 
 
     <td>Smith</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" name="chck_box[]" value="3"></td> 
 
     <td>Bill</td> 
 
     <td>White</td> 
 
    </tr> 
 
    </tbody> 
 
</table>