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

あなたはこれをやろうとしていますか？あなたが最初に視覚的に表示するチェックして、アラートを使用する場合に限り

のsetTimeoutが必要とされていない

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

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>