JQuery的点击儿童在家长点击了

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

你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; 
});​ 

此解决方案不会遇到DOM冒泡问题James描述

Answer 2

您将此字符串作为字符串传递，而不是作为对象传递。 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 3

当你使用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（使用:）。这是与checkbox类型的input元素匹配的选择器。

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

Answer 4

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

Answer 5

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 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>