6

私のjsコードで、name:check_allすべてのチェックボックスを1回クリックするだけでチェックできるのはなぜですか?

HTML:

<div id="ss">
    <input type="checkbox" name="check_all">
</div>
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">

jQuery:

$(document).on('click change','input[name="check_all"]',function() {
    var checkboxes = $('.idRow');
    if($(this).is(':checked')) {
        checkboxes.attr("checked" , true);
    } else {
        checkboxes.attr ( "checked" , false );
    }
});

デモ: http://jsfiddle.net/KdaZr/

私のjQueryのバージョンは1.9です。

どうすれば修正できますか？

4

4 に答える 4

14

prop メソッドを使用します。マークアップがレンダリングされると、属性が要素のプロパティになるため、JavaScript を使用して要素のプロパティを変更する必要があります。

$(document).on('change','input[name="check_all"]',function() {
    $('.idRow').prop("checked" , this.checked);
});

http://jsfiddle.net/GW64e/

input[name="check_all"]が動的に生成されない場合は、イベントを委任する必要がないことに注意してください。

于 2013-02-17T20:48:36.567 に答える
2

要素のプロパティを変更するには、 .propではなくを使用します。HTML属性用です。.attr.attr

http://jsfiddle.net/KdaZr/1/

于 2013-02-17T20:48:30.200 に答える
0

修正は次のとおりです： -

$(document).on('click change','input[name="check_all"]',function() {
    var checkboxes = $('.idRow');
    if($(this).is(':checked')) {
        checkboxes.each(function(){
            this.checked = true;
        });
    } else {
        checkboxes.each(function(){
            this.checked = false;
        });
    }
});
于 2014-05-09T07:03:54.860 に答える
-1

完全なソリューションの選択 || チェックボックス jQuery の選択を解除します。

$(document).ready(function() {
  $("#checkedAll").change(function(){
    if(this.checked){
      $(".checkSingle").each(function(){
        this.checked=true;
      })              
    }else{
      $(".checkSingle").each(function(){
        this.checked=false;
      })              
    }
  });

  $(".checkSingle").click(function () {
    if ($(this).is(":checked")){
      var isAllChecked = 0;
      $(".checkSingle").each(function(){
        if(!this.checked)
           isAllChecked = 1;
      })              
      if(isAllChecked == 0){ $("#checkedAll").prop("checked", true); }     
    }
    else {
      $("#checkedAll").prop("checked", false);
    }
  });
});

HTML は次のようになります。

チェックされた 3 つのチェックボックスの 1 つのチェック ボックスが選択および選択解除されます。

<input type="checkbox" name="checkedAll" id="checkedAll"></input>

<input type="checkbox" name="checkAll" class="checkSingle"></input>
<input type="checkbox" name="checkAll" class="checkSingle"></input>
<input type="checkbox" name="checkAll" class="checkSingle"></input>

これが私と同じように誰かに役立つことを願っています。

于 2014-09-06T06:05:37.567 に答える