Question

我有一个漫长的一天......

我有以下代码

<div class="background" onclick="javascript:$('this checkbox').click();">
    <div class="picture"> 
       <img class="colors" src="458x395.png" />
    </div>
    <input type="checkbox" value="nothing" name="check" class="selsts" />
</div>
<div class="background" onclick="javascript:$('this checkbox').click();">
    <div class="picture"> 
       <img class="colors" src="asdfag3.png" />
    </div>
    <input type="checkbox" value="aff4t" name="check" class="selsts" />
</div>

它应该点击复选框。我无法通过名称，类或id来区分，我必须使用该类型。我还需要确保它在父div中，而不是别的。

知道为什么这不起作用？我确定我只是有一个愚蠢的时刻。：\

由于

Answer 1

HTML

<div class="background">
    <div class="picture"> 
       <img class="colors" src="458x395.png" />
    </div>
    <input type="checkbox" value="nothing" name="check" class="selsts" />
</div>

的Javascript

$('div.background').click(function() { 
  var checkBox = $(this).find('input:checkbox'); 
   checkBox.attr('checked', !checkBox.attr('checked'));
});

Answer 2

当您使用jQuery时，您可能不应该使用onclick属性绑定事件处理程序。

主要问题是你将字符串传递给jQuery。该字符串被解释为选择器，并将查找类型checkbox的元素，该元素是this类型元素的后代。显然，这不会存在。

你想要更像这样的东西：

$("div.background").click(function() {
    $(this).find(":checkbox").click();
});

或者，您可以将this作为上下文传递给jQuery（相当于使用find）：

$("div.background").click(function() {
    $(":checkbox", this).click();
});

请注意，我使用:checkbox而非checkbox（使用:）。这是一个匹配input类型的checkbox元素的选择器。

然而，这可能会有一个大问题。你将陷入无限循环（因为DOM事件在树上冒泡）。您需要在复选框上捕获click事件并停止在那里传播。

Answer 3

您的jQuery正在寻找一个不存在的this标记。你不应该内联你的JS。并且.click()在添加新元素时不会检查DOM，因此请尝试以下操作：

<div class="background">
    <div class="picture"> 
        <img class="colors" src="458x395.png" />
    </div>
    <input type="checkbox" value="nothing" name="check" class="selsts" />
</div>

然后让它实际检查复选框使用（这是jQuery 1.7）：

$(".background").on("click",function(e) {
    var chk = $(this).find('input[type=checkbox]')[0];
    chk.checked = !chk.checked;
});

此解决方案没有遇到James描述的DOM冒泡问题

Answer 4

您将其作为字符串传递，而不是作为对象传递。 Jquery不会理解这个的范围。考虑将html之外的函数附加到单独的关注点

尝试此操作，它将允许用户选中/取消选中，并且不会传播创建循环的事件。

<div class="background">
    <div class="picture">
       <img class="colors" src="458x395.png" />
    </div>
    <input type="checkbox" value="nothing" name="check" class="selsts" />
</div>

的Javascript

 $(document).ready(function(){
    $(".background").click(function(e){
        var chk = $($(this).find("input[type='checkbox']"));
        if(chk.attr('checked'))
        {
            chk.attr('checked',false);
        }else{
            chk.attr('checked',true);
        }

       });
    });

示例：http://jsfiddle.net/fycFB/

Answer 5

onclick="$(this).find(':checkbox').attr('checked','checked')"

Answer 6

你需要这样吗？

 $("input[type=checkbox]").click(function(){ alert('Checked');});

http://jsfiddle.net/JF2xu/1/

Answer 7

<div class="background" style="border:1px solid black;" onclick="javascript:$(this).find(':checkbox').attr('checked',true);"> 
                    <div class="picture"> 
                    <img class="colors" src="458x395.png" />
                    </div>
                <input type="checkbox" value="nothing" name="check" class="selsts" />
            </div>

父母单击时，JQuery单击子项

7 个答案: