jQuery - 如果用户选择了特定的复选框，则取消选中其他复选框 [英] jQuery - Uncheck other checkboxes if a specific checkbox is selected by user

问题描述

如果用户选择了特定的复选框，我想取消选中当前选中的所有复选框。

示例：

 < div> 
< label for =foo> 
< input type =checkboxname =mehid =foochecked> foo 
< / label> 
< / div> 
< div> 
< label for =bar> 
< input type =checkboxname =mehid =barchecked>栏
< / label> 
< / div> 
< div> 
< label for =foobar> 
< input type =checkboxname =mehid =foobar> foob​​ar 
< / label> 
< / div> 
< div> 
< label for =barfoo> 
< input type =checkboxname =mehid =barfoochecked> barfoo 
< / label> 
< / div> 
< div> 
< label for =omgwtfbbq> 
< input type =checkboxname =mehid =omgwtfbbq> omgwtfbbq 
< / label> 
< / div> 
  

如果用户选择omgwtfbbq复选框，我希望可以检查的所有其他框取消选中，并且只有omgwtfbbq被选中。

解决方案

code>而不是 id 我认为你需要用于

 < div> 
< label for =foo> 
< input type =checkboxname =fooid =foochecked /> foo 
< / label> 
< / div> 
< div> 
< label for =bar> 
< input type =checkboxname =barid =barchecked />栏
< / label> 
< / div> 
< div> 
< label for =foobar> 
< input type =checkboxname =foobarid =foobar/> foob​​ar 
< / label> 
< / div> 
< div> 
< label for =barfoo> 
< input type =checkboxname =barfooid =barfoochecked /> barfoo 
< / label> 
< / div> 
< div> 
< label for =omgwtfbbq> 
< input type =checkboxname =omgwtfbbqid =omgwtfbbq/> omgwtfbbq 
< / label> 
< / div> 
  

然后

 <$ （'＃omgwtfbbq'）
 $（'＃omgwtfbbq'）。change（（））code> var $ others = $（'input [type =checkbox] [name =meh]'）。函数（）{
 if（this.checked）{
 $ others.prop（'checked'，false）
} 
}）; 
 $ others.change（function（）{
 if（this.checked）{
 $（'＃omgwtfbbq'）。prop（'checked'，false）
} 
}）
  

演示：小提琴

注意：我会为所有必须影响的输入元素添加一个公共类 omgwtfbbq 并更改 var $ others = $（'＃foo，#bar，#foobar，#barfoo'） to var $ others = $（'。myclassoninput'）

I would like to uncheck all the checkboxes that are presently selected if a specific checkbox is selected by the user.

Example:

<div>
    <label for="foo">
        <input type="checkbox" name="meh" id="foo" checked> foo
    </label>
</div>
<div>
    <label for="bar">
        <input type="checkbox" name="meh" id="bar" checked> bar
    </label>
</div>
<div>
    <label for="foobar">
        <input type="checkbox" name="meh" id="foobar"> foobar
    </label>
</div>
<div>
    <label for="barfoo">
        <input type="checkbox" name="meh" id="barfoo" checked> barfoo
    </label>
</div>
<div>
    <label for="omgwtfbbq">
        <input type="checkbox" name="meh" id="omgwtfbbq"> omgwtfbbq
    </label>
</div>

If the user selects "omgwtfbbq" checkbox, I would like all the other boxes that might be checked to be unchecked and have the "omgwtfbbq" be the only one checked.

解决方案

for the label instead of id I think you need for

<div>
    <label for="foo">
        <input type="checkbox" name="foo" id="foo" checked /> foo
    </label>
</div>
<div>
    <label for="bar">
        <input type="checkbox" name="bar" id="bar" checked /> bar
    </label>
</div>
<div>
    <label for="foobar">
        <input type="checkbox" name="foobar" id="foobar" /> foobar
    </label>
</div>
<div>
    <label for="barfoo">
        <input type="checkbox" name="barfoo" id="barfoo" checked /> barfoo
    </label>
</div>
<div>
    <label for="omgwtfbbq">
        <input type="checkbox" name="omgwtfbbq" id="omgwtfbbq" /> omgwtfbbq
    </label>
</div>

then

var $others = $('input[type="checkbox"][name="meh"]').not('#omgwtfbbq')
$('#omgwtfbbq').change(function () {
    if (this.checked) {
        $others.prop('checked', false)
    }
});
$others.change(function () {
    if (this.checked) {
        $('#omgwtfbbq').prop('checked', false)
    }
})

Demo: Fiddle

Note: I'll add a common class to all the input elements which has to be affected by omgwtfbbq and change var $others = $('#foo, #bar, #foobar, #barfoo') to var $others = $('.myclassoninput')

这篇关于jQuery - 如果用户选择了特定的复选框，则取消选中其他复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！