jQuery - 選中CHECK ALL時取消選中其他復選框

Question

我的目的

當我點擊Check All的第一列，在該列的所有復選框應該檢查並設置按鈕應該顯示出來。 而其他列中的其他復選框應取消選中。 此外，當我單擊第二列中的“ Check All時，第一列中的“ 設置”按鈕將被隱藏並顯示在第二列中，然后取消選中其他復選框。

HTML代碼：

<div id="allCheckboxes">
<table width="500px">
 <tr>
    <td>Check ALL <input type="checkbox" id="checkAll_1"><div id="setBttn_1" style="display:none;"><input type="button" value="Set"></div></td>
    <td>Check ALL <input type="checkbox" id="checkAll_2"><div id="setBttn_2" style="display:none;"><input type="button" value="Set"></div></td>
    <td>Check ALL <input type="checkbox" id="checkAll_3"><div id="setBttn_3" style="display:none;"><input type="button" value="Set"></div></td>
 </tr>
 <tr>
  <td><input type="checkbox" id="chkBox1" name="Box1" checked value="1" /></td>
  <td><input type="checkbox" id="chkBox2" name="Box2" value="12"/></td>
  <td><input type="checkbox" id="chkBox3" name="Box3" value="13"/></td>
  <tr>
  <td><input type="checkbox" id="chkBox10" name="Box1" checked value="001" /></td>
  <td><input type="checkbox" id="chkBox20" name="Box2" value="182"/></td>
  <td><input type="checkbox" id="chkBox30" name="Box3" value="123"/></td>
  </tr>
  <tr>
  <td><input type="checkbox" id="chkBox11" name="Box1" value="333" /></td>
  <td><input type="checkbox" id="chkBox181" name="Box2" value="184442"/></td>
  <td><input type="checkbox" id="chkBox101" name="Box3" checked value="1243"/></td>
  </tr>
 </table>
</div>

jQuery：

$('input[type="checkbox"]').on('change', function() {
  $(this).closest('tr').find('input').not(this).prop('checked', false);
});
$('#checkAll_1').change(function () {
  $('[name="Box1"]').prop('checked', $(this).prop("checked"));
  if($('#checkAll_1').is(':checked')) {
    $('#setBttn_1').show();
  } else {
    $('#setBttn_1').hide();
  }
});
$('#checkAll_2').change(function () {
  $('[name="Box2"]').prop('checked', $(this).prop("checked"));
  if($('#checkAll_2').is(':checked')) {
    $('#setBttn_2').show();
  } else {
    $('#setBttn_2').hide();
  }
});
$('#checkAll_3').change(function () {
  $('[name="Box3"]').prop('checked', $(this).prop("checked"));
  if($('#checkAll_3').is(':checked')) {
    $('#setBttn_3').show();
  } else {
    $('#setBttn_3').hide();
  }
});

當前結果是當我單擊第一列中的“ Check All時，它不會取消選中其他復選框。 當我單擊第二列中的“ Check All時，第一列中的“ 設置”按鈕將不會隱藏。 如果我取消選中“全部檢查”，是否可以在當前選擇之前返回之前檢查過的選項？

現場演示： http ： //jsfiddle.net/WzuMa/142/

Answer 1

您是以編程方式設置checked屬性，它不會觸發change事件處理程序。

要觸發事件處理程序，應使用.trigger(event)函數。

 $('input[type="checkbox"]').on('change', function() { $(this).closest('tr').find('input').not(this).prop('checked', false); }); $('#checkAll_1').change(function() { $('[name="Box1"]').prop('checked', $(this).prop("checked")).trigger('change'); if ($('#checkAll_1').is(':checked')) { $('#setBttn_1').show(); } else { $('#setBttn_1').hide(); } }); $('#checkAll_2').change(function() { $('[name="Box2"]').prop('checked', $(this).prop("checked")).trigger('change'); if ($('#checkAll_2').is(':checked')) { $('#setBttn_2').show(); } else { $('#setBttn_2').hide(); } }); $('#checkAll_3').change(function() { $('[name="Box3"]').prop('checked', $(this).prop("checked")).trigger('change'); if ($('#checkAll_3').is(':checked')) { $('#setBttn_3').show(); } else { $('#setBttn_3').hide(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="allCheckboxes"> <table width="500px"> <tr> <td>Check ALL <input type="checkbox" id="checkAll_1"> <div id="setBttn_1" style="display:none;"> <input type="button" value="Set"> </div> </td> <td>Check ALL <input type="checkbox" id="checkAll_2"> <div id="setBttn_2" style="display:none;"> <input type="button" value="Set"> </div> </td> <td>Check ALL <input type="checkbox" id="checkAll_3"> <div id="setBttn_3" style="display:none;"> <input type="button" value="Set"> </div> </td> </tr> <tr> <td> <input type="checkbox" id="chkBox1" name="Box1" checked value="1" /> </td> <td> <input type="checkbox" id="chkBox2" name="Box2" value="12" /> </td> <td> <input type="checkbox" id="chkBox3" name="Box3" value="13" /> </td> <tr> <td> <input type="checkbox" id="chkBox10" name="Box1" checked value="001" /> </td> <td> <input type="checkbox" id="chkBox20" name="Box2" value="182" /> </td> <td> <input type="checkbox" id="chkBox30" name="Box3" value="123" /> </td> </tr> <tr> <td> <input type="checkbox" id="chkBox11" name="Box1" value="333" /> </td> <td> <input type="checkbox" id="chkBox181" name="Box2" value="184442" /> </td> <td> <input type="checkbox" id="chkBox101" name="Box3" checked value="1243" /> </td> </tr> </table> </div> 

Answer 2

你可以用這個：

 $('#allCheckboxes').find('tr').first().find(':checkbox').on('change', function(e) { var $this = $(this), idx = $this.closest('td').index(); $('div[id^="setBttn"]').hide(); $this.next('div').toggle(this.checked); $('[id^="checkAll"]:checked').not(this).prop('checked', !this.checked); $('#allCheckboxes').find('tr').not(':first').each(function() { $(this).find(':checkbox:checked').prop('checked', !$this.prop('checked')); $(this).find('td').eq(idx).find(':checkbox').prop('checked', $this.prop('checked')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="allCheckboxes"> <table width="500px"> <tr> <td>Check ALL <input type="checkbox" id="checkAll_1"> <div id="setBttn_1" style="display:none;"> <input type="button" value="Set"> </div> </td> <td>Check ALL <input type="checkbox" id="checkAll_2"> <div id="setBttn_2" style="display:none;"> <input type="button" value="Set"> </div> </td> <td>Check ALL <input type="checkbox" id="checkAll_3"> <div id="setBttn_3" style="display:none;"> <input type="button" value="Set"> </div> </td> </tr> <tr> <td> <input type="checkbox" id="chkBox1" name="Box1" checked value="1" /> </td> <td> <input type="checkbox" id="chkBox2" name="Box2" value="12" /> </td> <td> <input type="checkbox" id="chkBox3" name="Box3" value="13" /> </td> <tr> <td> <input type="checkbox" id="chkBox10" name="Box1" checked value="001" /> </td> <td> <input type="checkbox" id="chkBox20" name="Box2" value="182" /> </td> <td> <input type="checkbox" id="chkBox30" name="Box3" value="123" /> </td> </tr> <tr> <td> <input type="checkbox" id="chkBox11" name="Box1" value="333" /> </td> <td> <input type="checkbox" id="chkBox181" name="Box2" value="184442" /> </td> <td> <input type="checkbox" id="chkBox101" name="Box3" checked value="1243" /> </td> </tr> </table> </div> 

Answer 3

問題是prop不會觸發更改（有充分理由，因為默認情況下可能會導致遞歸事件）。

您可以在設置prop后簡單地觸發change()事件，但是您需要確保它不會遞歸觸發（因此添加了一個sentinel變量）：

var processing = false;
$('input[type="checkbox"]').on('change', function() {
  if (!processing) {
    processing = true;
    $(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', false).trigger('change');
    processing = false;
  }
});

JSFiddle： http ： //jsfiddle.net/TrueBlueAussie/WzuMa/143/

更新 - 取消選中時恢復以前的值

var processing = false;
var $checkboxes = $('input[type="checkbox"]');
$checkboxes.on('change', function() {
  if (!processing) {
    processing = true;
    if (this.checked){
        // Store all answers on a data attribute
        $checkboxes.each(function(){
            $(this).data('lastcheck', $(this).prop('checked'));
        });
        $(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', false).trigger('change');
    }
    else {
            // Restore all the previous checked box states
        $checkboxes.not(this).each(function(){
                $(this).prop('checked', $(this).data('lastcheck')).removeData('lastcheck');
        });
    }
    processing = false;
  }
});

JSFiddle： http ： //jsfiddle.net/TrueBlueAussie/WzuMa/144/

你可以調整這種技術來代替行操作，對於較低的復選框，但是我必須留下一些東西給你做:)

Answer 4

嘗試下面的JS，現在事情是硬編碼的，但如果這個解決方案和你一樣預期，那么我可以將它更新為更多的動態

 $('input[type="checkbox"]').on('change', function() { $(this).closest('tr').find('input').not(this).prop('checked', false); }); $('#checkAll_1').change(function () { $('[name="Box1"]').prop('checked', $(this).prop("checked")); $('[name="Box2"],[name="Box3"]').prop('checked', false); if($('#checkAll_1').is(':checked')){ $('#setBttn_1').show(); $('#setBttn_2,#setBttn_3').hide(); }else{ $('#setBttn_1').hide(); } }); $('#checkAll_2').change(function () { $('[name="Box2"]').prop('checked', $(this).prop("checked")); $('[name="Box1"],[name="Box3"]').prop('checked', false); if($('#checkAll_2').is(':checked')){ $('#setBttn_2').show(); $('#setBttn_1,#setBttn_3').hide(); }else{ $('#setBttn_2').hide(); } }); $('#checkAll_3').change(function () { $('[name="Box3"]').prop('checked', $(this).prop("checked")); $('[name="Box1"],[name="Box2"]').prop('checked', false); if($('#checkAll_3').is(':checked')){ $('#setBttn_3').show(); $('#setBttn_1,#setBttn_2').hide(); }else{ $('#setBttn_3').hide(); } });