取消选中所有其他复选框 [英] Uncheck all other checkboxes
问题描述
当用户点击复选框时,我需要清除所有其他复选框。与单选按钮几乎相同的行为。用户点击复选框A,复选框B和C都未选中。我使用jquery,但我不知道如何完成这个。任何想法?
I need to clear all other checkboxes when a user clicks a checkbox. Pretty much the same behavior as a radio button. User clicks checkbox 'A' and checkboxes 'B' and 'C' are both unchecked. I am using jquery but I can't figure out how to accomplish this. Any ideas?
这里是如何设置复选框u:
Here are how the checkboxes are set u:
<div class="sales_block_one">
<span class="sales_box_option_set"><input type="checkbox" value="1" id="exopt10i11553501716" name="optset[0][id]" /><label for="exopt10i11553501716">Test + £100.00</label></span>
<span class="sales_box_option_set"><input type="checkbox" value="2" id="exopt11i21553501716" name="optset[1][id]" /><label for="exopt11i21553501716">Test + £ 200.00</label></span>
<span class="sales_box_option_set"><input type="checkbox" value="3" id="exopt12i31553501716" name="optset[2][id]" /><label for="exopt12i31553501716">Test 3 + £400.00</label></span>
</div>
推荐答案
如果所有复选框都是兄弟姐妹, ,
if all the checkboxes are siblings, it's just like this,
$(':checkbox').change(function(){
if (this.checked) {
$(this).siblings(':checkbox').attr('checked',false);
}
});
疯狂演示
好吧,如果你真的要复制单选按钮的行为,就像这样,
crazy demo
Well, if you really want to copy the behavior of the radio button, simple as this,
$(':checkbox').change(function(){
this.checked = true;
$(this).siblings(':checkbox').attr('checked',false);
});
疯狂演示
siblings是当元素具有相同的父级/容器时。
crazy demo
siblings is when the elements has one same parent/container.
示例
<div>
<input type="checkbox" /><label>A</label>
<input type="checkbox" /><label>B</label>
<input type="checkbox" /><label>C</label>
<input type="checkbox" /><label>D</label>
</div>
其中,< input>
和< label>
是兄弟姐妹。
case这不是兄弟姐妹,你可以这样做,
In your case, which it's not siblings, you can do it this way,
$('.sales_block_one :checkbox').change(function() {
var $self = this; // save the current object - checkbox that was clicked.
$self.checked = true; // make the clicked checkbox checked no matter what.
$($self).closest('span') // find the closest parent span...
.siblings('span.sales_box_option_set') // get the siblings of the span
.find(':checkbox').attr('checked',false); // then find the checbox inside each span and then uncheck it.
});
疯狂演示
这篇关于取消选中所有其他复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!