Нажмите на флажок внутри div, который изменит состояние флажка. JQuery

88
5

Может кто-нибудь помочь мне с этой проблемой?


$('.check_group').click(function () {
var check = $(this).children('input')[0];
check.checked = !check.checked;
alert(check.checked);
//run something else
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="check_group" style="background-color: rgb(200, 138, 59);">
<input type="checkbox" />
</div>

Итак, когда я нажимаю на флажок - меняем состояние флажка, а затем запускает jQuery и изменения статуса обратно.


Как сделать так, чтобы при щелчке по флажку div/Checkbox был изменен и есть предупреждение?

спросил(а) 2021-01-25T19:57:08+03:00 5 месяцев назад
1
Решение
63

Попробуйте этот код, вам нужно определить, когда щелкнут DIV, тогда вам нужно установить флажок/флажок флажка.


$('.check_group').click(function (e) {
var input = $(this).children('input[type="checkbox"]');
//Identify the node which is clicked
if(e.target.nodeName == "DIV")
{
$(input).prop('checked', !$(input).prop("checked"));
}
console.log($(input).is(":checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="check_group" style="background-color: rgb(200, 138, 59);">
<input type="checkbox" />
</div>

ответил(а) 2021-01-25T19:57:08+03:00 5 месяцев назад
45

Вы пытаетесь это сделать?


$('.check_group').click(function () {
var checkbox = $(this).children('input')[0];
setTimeout(function(){alert(checkbox.checked);},200);
//run something else
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="check_group" style="background-color: rgb(200, 138, 59);">
<input type="checkbox" />
</div>

setTimeout не требуется, если вы не хотите визуально показать чек сначала, а затем оповестить

ответил(а) 2021-01-25T19:57:08+03:00 5 месяцев назад
46

Временное решение:


$('.check_group').click(function (e) {
var check = $(this).children('input')[0];
if (e.target.tagName == "INPUT") {
check.checked = !check.checked;
}
check.checked = !check.checked;
alert(check.checked);
//
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="check_group" style="background-color: rgb(200, 138, 59);">
<input type="checkbox" />
</div>

ответил(а) 2021-01-25T19:57:08+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема