Question

我的目的

当我单击第一列中的Check All时，应检查该列中的所有复选框，并显示 Set 按钮。而其他列中的其他复选框应取消选中。此外，当我单击第二列中的Check All时，第一列中的 Set 按钮将被隐藏并显示在第二列中，然后取消选中其他复选框。

HTML CODE：

<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 按钮不会隐藏。如果我取消选中＆＃34;全部检查＆＃34;？

，是否可以在当前选择之前返回之前选中的选项？

现场演示： 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不会触发更改（有充分理由，因为默认情况下可能会导致递归事件）。

您可以在设置change()后简单地触发prop事件，但您需要确保它不会递归触发（因此添加了一个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，现在事情是硬编码的，但如果这个解决方案和你一样预期，那么我可以将它更新为更多动态

＆＃13;

  

 $('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();
		}
	});

＆＃13;

jQuery - 选中CHECK ALL时取消选中其他复选框

4 个答案:

更新 - 取消选中时恢复以前的值