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

Question

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

$('.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 - флажок изменился и есть предупреждение?

Answer 1

Попробуйте этот код, вам нужно определить, когда нажата кнопка 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>

Answer 2

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

$('.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 не требуется, если вы хотите визуально показать чек, а затем оповещения

Answer 3

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

$('.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>