jQuery - 选中 CHECK ALL 时未选中其他复选框答案

【问题标题】：jQuery - Unchecked other checkbox when CHECK ALL is checkedjQuery - 选中 CHECK ALL 时未选中其他复选框
【发布时间】：2015-12-17 12:44:04
【问题描述】：

我的目的

当我单击第一列中的Check All 时，应选中该列中的所有复选框，并且应显示 Set 按钮。而其他列中的其他复选框应取消选中。另外，当我点击第二列中的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 时，第一列中的 Set 按钮不会隐藏。如果我取消单击“全选”，是否可以在当前选择之前返回先前选中的选项？

现场演示： http://jsfiddle.net/WzuMa/142/

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

问题在于prop 不会触发更改（有充分的理由，因为默认情况下这可能会导致递归事件）。

您可以在设置prop 后简单地触发change() 事件，但您需要确保它不会递归触发（因此添加了一个哨兵变量）：

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/

您可以调整此技术以改为对行进行操作，对于较低的复选框，但我必须为您留下一些事情：)

【讨论】：

如果不勾选“全部点击”是否可以返回之前的属性或条件？？？
@user1234：当然，但您需要确定“以前”对您的 UI 意味着什么。例如。您想在当前选择之前返回之前选中的选项吗？
如果取消点击“检查所有”，我想让它回到以前检查过的选项..怎么做？？？
@user1234：您确实意识到您正在引入非标准行为？当您取消选中单个复选框时，不确定您的用户是否会对它回弹到以前的选择印象深刻。解决方案是将所有复选框的先前检查值存储为这些控件上的数据属性/值。然后，您只需恢复到它们存储的值（当前值除外）。上面添加的示例。

【解决方案2】：

您正在以编程方式设置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>

【讨论】：

【解决方案3】：

你可以用这个：

$('#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>

【讨论】：

@user1234 最好使用命名无线电。

【解决方案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();
		}
	});

【讨论】：

如何让它变得更有活力？
我需要在这方面做更多的工作，这没关系意味着功能适合你吗？
它工作完美。谢谢。我想问如果未选中“单击全部”是否可以返回以前的属性或条件？？？
对不起，我不清楚你的意思，能否请您解释一下 - 如果未选中“单击全部”，是否可以返回以前的属性或条件？？？
@user1234 try nowe 现在代码中的行数是最少的。将尝试使解决方案更通用，但目前这只是我所做的。