jQuery - Снимите отметку с других флажков, если пользователь установил определенный флажок

Question

Я хотел бы снять отметку со всех флажков, которые в настоящее время выбраны, если пользовательский флажок установлен.

Пример:

<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> 

Если пользователь выбирает «OMGWTFBBQ» флажок, я хотел бы, чтобы все другие окна, которые могут быть проверены, чтобы быть снят, и есть «OMGWTFBBQ» быть только один чек.

Answer 1

для label вместо id Я думаю, что вам нужно 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> 

затем

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) 
    } 
}) 

Демо: Fiddle

Примечание: Я добавлю общий класс для всех входных элементы, на которые должно воздействовать omgwtfbbq и изменить var $others = $('#foo, #bar, #foobar, #barfoo') на var $others = $('.myclassoninput')

Answer 2

Live demo (click).

$('#omgwtfbbq').click(function() { 
    $('input:checkbox').not(this).attr('checked', false); 
}); 

отметить также, что вы повторно использовать идентификаторы. Идентификатор должен использоваться только один раз в документе.

Answer 3

Если вы не дать каждому CheckBox последовательный идентификатор, так что вы можете использовать массив, вот решение:

Поместите все ваши элементы управления в DIV, с ID «checkgroup».

Тогда функция JavaScript идет:

function checkone(d){ 
    if (!d.checked) return; //if it's unchecked, then do nothing 

    var group=document.getElementById('checkgroup'); 
    var os=group.getElementsByTagName('input'); 
    for (var i=0;i<os.length;i++){ 

    if (os[i].checked&&os[i]!=d) os[i].checked=false; 

    } 

} 

Теперь вы можете вызывать эту функцию в каждом флажке

<div id="checkgroup"> 
    <input id="abcd" onclick="checkone(this);"> 
    <input id="xyz" onclick="checkone(this);"> 
    ... 
</div> 

Обратите внимание, как вы даже не нужно возиться с именем, так как объект проходит сам по себе.