我的目的
当我单击第一列中的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
时,第一列中的Set按钮不会隐藏。如果我取消单击"全选",是否可以返回到当前选择之前选中的选项?
现场演示:http://jsfiddle.net/WzuMa/142/
问题是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/
对于较低的复选框,您可以调整此技术来操作行,但我必须为您留下一些事情:)
如果您以编程方式设置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>
您可以使用这个:
$('#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>
尝试下面的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();
}
});