Question

我遇到复选框检查事件无效的情况。我已将复选框放在一个包含click事件的div中，然后选中/取消选中复选框。

<div onclick="checkCheckBox('ch_0')">
    <input type='checkbox' value='20' id='ch_0'/>
</div>

并编写如下脚本

 function checkCheckBox(checkboxId)
 {
     var checkBoxes = $("#" + checkboxId);
        checkBoxes.attr("checked", !checkBoxes.attr("checked"));
        if (checkBoxes.attr("checked") == true) {
            $(this).addClass('selected');
        }
        else {
            $(this).removeClass('selected');
        }
 }

Answer 1

此行为正是label元素的用途;没有必要使用javascript：

<label>
    <input type='checkbox' value='20' id='ch_0'/>
     Foo Bar Checkbox
</label>

如果您签入 this fiddle ，您会看到该复选框的点击区域是整个label元素，该元素已展开以包含文字。

Answer 2

它正在工作，你可能在其他地方遇到问题

<强> live Demo

function checkCheckBox(id)
{
    alert(id);
}

Answer 3

试试这个

function checkCheckBox(id)
 {
      $("div input[type='checkbox']").prop("checked",true)
 }

Answer 4

当你点击输入时，你应该停止传播，就像那样，它不会传播到父div。

$('#mydiv').on('click',function(){
        alert('in the div');
    });

    $('#myinput').on('click',function(event){
        event.stopPropagation();             <<<<<<<<<<<<<<<<<<<<<<<<<<<
        alert('in the input');
    });

jsfiddle：http://jsfiddle.net/UCR5q/

Answer 5

尝试使用这样的道具

function checkCheckBox(checkboxId) {
    var that = $('#' + checkboxId);
    var checked = that.prop('checked');
    that.prop('checked', !checked)
    .parent()
    .toggleClass('selected');
}

您正在使用this来获取div，但是您没有在函数中传递此函数，因此您必须使用.parent（）

DEMO

或者您可以像这样使用.onclick功能

    $('#myDiv').on('click', function () {
        var chk = $(this).find('input');
        var toggleChck = chk.prop('checked');
        chk.prop('checked', !toggleChck);
        $(this).toggleClass('selected');
    });

DEMO

Answer 6

尝试使用.prop代替.attr。

$('div').on('click',function(){
  var isChecked = $($(this).find('input[type="checkbox"]')[0]).prop('checked');
  if(isChecked){
    $(this).addClass('selected');
  }
  else{
    $(this).removeClass('selected');
  }
});

Js Fiddle Demo

Answer 7

要使CheckBox点击工作，如果它位于有点击事件的div中，你可以在你的复选框上试试这个点击事件当前不起作用：

CSS：

div input {
  position: absolute;
  z-index: 999;
}

Answer 8

要启用文本以选中复选框，您必须为标签指定'for'属性：

<label for='ch_0'>Click here to check me</label>
<input type='checkbox' value='20' name='ch_0' id='ch_0'/>

通过这种方式，点击复选框或标签将选中复选框。

（同样值得在输入中添加'name'属性，以便在语义上将其“绑定”到标签上）

Answer 9

这是一个有效的fiddle：

<label>
    <input type="checkbox" name="hungry"/>
    <img src="http://samstavernseattle.com/wp-content/uploads/2013/06/Magic-Mushroom-Burger.jpg" width="50" alt="" />
    <span>FOOOD</span>
</label>

它也传递了W3 validator。

如果CheckBox位于具有click事件的div中，则单击CheckBox不起作用

9 个答案: