3

我遇到复选框检查事件不起作用的情况。我已将复选框放在具有单击事件的 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');
        }
 }
4

9 回答 9

6

这种行为正是该label元素的用途；不需要javascript：

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

如果你检查这个小提琴，你会看到复选框的点击区域是整个label元素，它被扩展以包含文本。

于 2013-10-17T12:33:26.160 回答
2

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

现场演示

function checkCheckBox(id)
{
    alert(id);
}
于 2013-10-17T12:32:42.337 回答
2

尝试这个

function checkCheckBox(id)
 {
      $("div input[type='checkbox']").prop("checked",true)
 }
于 2013-10-17T12:32:51.133 回答
2

当你点击输入时，你应该停止传播，就像那样，它不会传播到父 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/

于 2013-10-17T12:36:12.243 回答
1

尝试使用这样的道具

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

您正在使用this获取 div，但您没有在函数中传递它，因此您必须使用 .parent()

演示

或者你可以像这样使用 .onclick 函数

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

演示

于 2013-10-17T12:33:29.177 回答
1

尝试使用.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 小提琴演示

于 2013-10-17T12:36:18.420 回答
1

如果 CheckBox 在具有单击事件的 div 内，要使其单击工作，您可以在单击事件当前不起作用的复选框上尝试此操作：

CSS：

div input {
  position: absolute;
  z-index: 999;
}
于 2013-10-17T12:37:26.147 回答
1

要启用文本以选中复选框，您必须为标签提供“for”属性：

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

这样，单击复选框或标签将选中复选框。

（还值得在输入中添加“名称”属性以将其语义“绑定”到标签）

于 2013-10-17T12:38:24.413 回答
1

这是一个工作小提琴：

<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 验证器。

于 2013-10-17T13:00:16.437 回答