Снимите флажки при щелчке другого флажка
У меня есть флажок, при нажатии которого весь раздел флажков становится отключенным, и любой флажок в этом разделе, который отмечен, станет неотмеченным. Это мой код для флажка:
<input class = "form-check-input" id = "notInterest" type = "checkbox" onclick = "NoInterest(this)"> Not Interested
Если указанный выше флажок становится отмеченным, я хочу, чтобы весь раздел флажков был отключен и снят.
<input class = "form-check-input" type = "checkbox" onclick = "NoInterest(this)"> Not Intereted
<div class = "form-group row" id = "reassignChecks">
@for (var i = 1; i <= 10; i++)
{
<input name = "AreChecked" type = "checkbox" value = "@i" /> @i
}
</div>Это код, который отключает раздел флажков при щелчке флажка «Не интересует». Отключение флажков работает нормально, но снятие флажков не работает. Ниже приведен код jQuery:
<script>
function NoInterest(cb) {
if (cb.checked == true) {
$('#reassignChecks').addClass('disableSection');
$('#reassignChecks').attr('checked', false);
} else {
$('#reassignChecks').removeClass('disableSection');
$('#reassignChecks').attr('checked', true);
}
}
</script>
Ниже приведен снимок экрана веб-страницы:
На приведенном выше снимке экрана при щелчке флажка «Не интересно» я хочу, чтобы все флажки в теге div с идентификатором «reassignChecks» были отключены и сняты.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
есть 2 вещи, чтобы сказать =>
1- вы можете проверить, есть ли проверенные входы по имени класса =>
$(".class-name:checked").length
2- определить, проверен вход или нет =>
$(".class-name").is(":checked")
3-, наконец, посмотрите приведенный ниже фрагмент =>
$(".other-input").on("change", function(){
if ($(".other-input:checked").length) {
$(".main-input").prop("checked", false);
} else {
$(".main-input").prop("checked", true);
}
})
$(".main-input").on("change", function(){
if ($(this).is(":checked")) {
$(".other-input").prop("checked", false);
}
}).other-inputs-section {
margin-top: 30px;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class = "main-input" type = "checkbox" />
not interested
<div class = "other-inputs-section">
<div>
1
<input class = "other-input" type = "checkbox" />
</div>
<div>
2
<input class = "other-input" type = "checkbox" />
</div>
<div>
3
<input class = "other-input" type = "checkbox" />
</div>
<div>
4
<input class = "other-input" type = "checkbox" />
</div>
<div>
5
<input class = "other-input" type = "checkbox" />
</div>
<div>
6
<input class = "other-input" type = "checkbox" />
</div>
</div>$('#reassignChecks').attr('checked', false); не повлияет на флажки, потому что #reassignChecks — это <div>.
Вместо этого вы хотите выбрать все элементы input[type = "checkbox"], которые являются дочерними элементами #reassignChecks, и установить их атрибут disabled в соответствии с отмеченным/не проверенным состоянием .form-check-input, а также, предположительно, установить для каждого из их свойств :checked значение false.
$('#notInterest').on('change', function () {
const isChecked = $(this).is(':checked');
$('#reassignChecks').toggleClass('disableSection', isChecked);
$('#reassignChecks input[type = "checkbox"]')
.attr('disabled', isChecked)
.prop('checked', false)
;
});.disableSection {
border: 1px solid red;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class = "form-check-input" id = "notInterest" type = "checkbox"> Not Intereted
<div class = "form-group row" id = "reassignChecks">
<input name = "AreChecked" type = "checkbox" value = "0" /> 0
<input name = "AreChecked" type = "checkbox" value = "1" /> 1
<input name = "AreChecked" type = "checkbox" value = "2" /> 2
<input name = "AreChecked" type = "checkbox" value = "3" /> 3
<input name = "AreChecked" type = "checkbox" value = "4" /> 4
<input name = "AreChecked" type = "checkbox" value = "5" /> 5
<input name = "AreChecked" type = "checkbox" value = "6" /> 6
</div>@rimi Ты почти понял. Для идентификатора селектор будет $('#notInterest'). Я обновил свой пост с этим изменением.
Привет @ 76484, у меня на странице есть несколько других флажков с именем класса «form-check-input». У меня есть идентификатор «notInterest» для флажка «Не интересно». Могу ли я написать эту строку: $('.notInterest').on('change', function () вместо этой строки: $('.form-check-input').on('change', function () или я должен использовать имя класса