JQuery. Как снять отметку со всех флажков, кроме одного (который был отмечен)

У меня есть элементы html, например:

<div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
</div>

И теперь, я хочу следующее: если я нажму на любой флажок, установите флажок, а другие флажки должны быть отмечены. Как я могу это сделать?

Ответы

Ответ 1

Вы можете использовать кнопку radio и группировать их по атрибутам имен. Если вам нужно сделать это с помощью checkboxes, вы можете сделать это таким образом,

Live Demo

$('.foo').click(function(){     
      $('.foo').attr('checked', false);
      $(this).attr('checked', true);          
});

Для динамически генерируемого html вам нужно on, которое позволяет делегировать событие со статическим родителем, вы можете используйте документ, с которым вы не знаете статического родителя.

$(document).on('click','.foo', function(){     
      $('.foo').attr('checked', false);
      $(this).attr('checked', true);          
});

Документ можно заменить статическим родителем, если он известен. например если div содержит динамически сгенерированный, имеет id parentdiv, то вы можете иметь

`$('#parentdiv').on('click','.foo', function(){`

Edit

Используйте prop вместо attr для свойств checked, selected или disabled в соответствии с документацией.

Как и в jQuery 1.6, метод .attr() возвращает undefined для атрибутов которые не были установлены. Извлечение и изменение свойств DOM, таких как проверенное, выбранное или отключенное состояние элементов формы, используйте .prop().

Ответ 2

Вот немного, над чем я работал:

.siblings("input[type='checkbox']").attr("checked", true);

выберет все флажки, кроме тех, которые были нажаты.

$("input[type=checkbox]").on("click", function() {

  if ($(this).val() == "none") {
    
    $(this).siblings("input[type=checkbox]").attr('checked', false);
    
  } else {
    
    $(this).siblings("input[value=none]").attr('checked', false);

  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <input type="checkbox" id="worker-soft-eaglesoft" checked><label for="worker-soft-eaglesoft">&nbsp;Eaglesoft</label><br>
  <input type="checkbox" id="worker-soft-dentrix"><label for="worker-soft-dentrix">&nbsp;Dentrix</label><br>
  <input type="checkbox" id="worker-soft-softDent"><label for="worker-soft-softDent">&nbsp;Soft-Dent</label><br>
  <input type="checkbox" id="worker-soft-denticon"><label for="worker-soft-denticon">&nbsp;Denticon</label><br>
  <input type="checkbox" id="worker-soft-other"><label for="worker-soft-other">&nbsp;Other</label><br>

  <input type="checkbox" id="worker-soft-none" value="none">
  <label for="worker-soft-none">&nbsp;No Software Experience - Paper Records Only</label><br>
</div>