单击div中的复选框，它会更改复选框的状态。 jQuery的

Can someone help me with this problem?

有人可以帮我解决这个问题吗?

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

So, when I click on the checkbox - change the state of the checkbox, and then triggered jQuery and status changes back.

因此,当我单击复选框时 - 更改复选框的状态,然后触发jQuery和状态更改。

How to make so that when you click on the div / Checkbox - checkbox has changed and there is an alert?

如何制作这样当你点击div / Checkbox时 - 复选框已更改且有警报?

3 个解决方案

#1

Try this code, you need to identify when the DIV is clicked then you need to make that check-box checked/unchecked.

尝试此代码,您需要确定何时单击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>

#2

Are you trying to do this ?

你想这样做吗?

$('.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 is not required unless you want visually show check first and then alert

除非您希望先进行直观显示检查然后再进行提醒,否则不需要setTimeout

#3

Temporary solution:

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

#1