Блог

Главная - Вопросы по программированию - Как снять флажок с переключателя, когда установлены флажки, и наоборот?

Как снять флажок с переключателя, когда установлены флажки, и наоборот?

#jquery

#jquery

Вопрос:

 <div id="a">
 <input type="checkbox" name="form">Apple<br/>
 <input type="checkbox" name="form">Banana
</div>

<div id="a">
  <input type="radio" name="form">A<br/>
  <input type="radio" name="form">B<br/>
</div>

когда флажки установлены, переключатель должен быть снят, а когда переключатели установлены, все флажки, которые установлены, должны быть сняты.

Комментарии:

1. У вас не должно быть двух DIVS с одинаковым идентификатором.

2. @Barmar Большое спасибо. Как мне включить идентификатор div в селекторы jquery?

3. #xxx :radio выбирает все переключатели внутри элемента с id="xxx" помощью .

Ответ №1:

В html вы не можете использовать id более одного элемента. Здесь вы можете прочитать об этом подробнее.

Также имена во входных данных лучше уникальны. Например, когда вы хотите работать с этими данными на серверной части.

 <div id="checkingInputs">
 <div id="a">
  <input type="checkbox" name="inputFirst">Apple<br>
  <input type="checkbox" name="inputSecond">Banana
 </div>
 <div id="b">
  <input type="radio" name="inputThird">Apple<br>
  <input type="radio" name="inputFourth">Banana
 </div>
</div>

Здесь чисто JS-решение, поскольку jQuery уже размещен.

 var inputs = document.querySelectorAll("#checkingInputs input");

for (var i = 0; i < inputs.length; i  ) {
 inputs[i].addEventListener("click", uncheckAll);
}

function uncheckAll() {
 for (var i = 0; i < inputs.length; i  ) {
  if (inputs[i] !== this) { //make sure to not uncheck checked element
   inputs[i].checked = false;
  }
 }
}

jsfiddle

Ответ №2:

 $(":radio").click(function() {
    $(":checkbox").prop("checked", false);
});
$(":checkbox").click(function() {
    $(":radio").prop("checked", false);
});

ДЕМОНСТРАЦИЯ

Комментарии:

1. Не могли бы вы уточнить ответ? 113 тыс. повторений; к настоящему времени вы должны быть хороши в этом.

2. Что нужно уточнить. Значение кода самоочевидно.

3. Это легко считать ответом только для кода. Единственная причина, по которой это не было отклонено как таковое, заключается в том, что есть ссылка на jsfiddle .

4. Кроме того, вы кормите справочного вампира. Вопрос демонстрирует отсутствие базового понимания темы.