Klicken Sie auf das Kontrollkästchen in div, das den Status des Kontrollkästchens ändert. jQuery

Question

Kann mir jemand bei diesem Problem helfen?

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

Also, wenn ich auf das Kontrollkästchen klicken - den Zustand der Kontrollkästchen ändern, und dann ausgelöst, jQuery und Statusänderungen zurück.

Wie zu machen, dass, wenn Sie auf die div/Checkbox - Kontrollkästchen hat sich geändert hat und gibt es eine Warnung?

Answer 1

Versuchen Sie diesen Code, Sie müssen erkennen, wann der DIV geklickt wird, dann müssen Sie dieses Kontrollkästchen aktivieren/deaktivieren.

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

Versuchen Sie dies zu tun?

$('.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 nicht erforderlich ist, es sei denn, Sie visuell zeigen zunächst überprüft und dann bei Alarm

Answer 3

Vorübergehende Lösung:

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