javascript onClick Div 选中未选中复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20902327/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onClick Div checked unchecked checkbox
提问by Surjith S M
I have multiple Divs based rows. Each row contains a check box.
我有多个基于 Div 的行。每行包含一个复选框。
I want to click on that row anywhere, it should check uncheck that specific checkbox.
我想在任何地方单击该行，它应该选中取消选中该特定复选框。
Here is the what I tried till now DEMO: http://jsfiddle.net/kERYB/19/JS :
这是我迄今为止尝试过的演示：http: //jsfiddle.net/kERYB/19/JS：
$('.row').click(function ()
{
$(this).closest(":checkbox").attr("checked", checked");
});
HTML:
HTML：
<div class="row">
<div class="left">
<input type="checkbox" class="cb-element" value="1" />
</div>
<div class="left">
<select><option>choose</option></select>
</div>
<div class="right">
This is First Record
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">
<input type="checkbox" class="cb-element" value="1" />
</div>
<div class="left">
<select><option>choose</option></select>
</div>
<div class="right">
This is Second Record
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">
<input type="checkbox" class="cb-element" value="1" />
</div>
<div class="left">
<select><option>choose</option></select>
</div>
<div class="right">
This is Third Record
</div>
<div class="clear"></div>
</div>
CSS:
CSS：
.row {
width:300px;
padding:4px;
border:1px solid #000;
margin:2px;
}
.left {
float:left;
width:50px;
}
.right {
float:right;
}
.clear {
clear:both;
}
}
回答by Surjith S M
You can do this without ifcondition.
您可以无条件执行此操作if。
Jquery
查询
$('.row').click(function ()
{
$(this).find('input[type=checkbox]').prop("checked", !$(this).find('input[type=checkbox]').prop("checked"));
});
Update (with variable) See Demo
更新（带变量）见演示
jQuery
jQuery
$('.row').click(function ()
{
var checkbox = $(this).find('input[type=checkbox]');
checkbox.prop("checked", !checkbox.prop("checked"));
});
Update 2: Fixed Bug on Cliking input See Demo
更新 2：修复了点击输入的错误请参阅演示
$('input[type=checkbox]').click(function (e)
{
e.stopPropagation();
return true;
});
Update 3: Without jQuery See Demo
更新 3：没有 jQuery看演示
Wrap the row with label
用 label
<label>
<div class="row">
...
</div>
</label>
Update 4: To exclude selecttag See Demo
更新 4：排除select标签见演示
$('input[type=checkbox], .row select').click(function (e)
{
e.stopPropagation();
return true;
});
回答by Ishan Jain
Try with this one :
试试这个：
$('.row').click(function ()
{
$(this).find('div:first input:checkbox').prop('checked', true)
}
);
Updated:
更新：
$('.row').click(function ()
{
if($(this).find('div:first input:checkbox').is(':checked')){
$(this).find('div:first input:checkbox').prop('checked', false)
}
else{
$(this).find('div:first input:checkbox').prop('checked', true)
}
});
回答by mahfuz
You can do it simply with HTML.
您可以简单地使用 HTML 来完成。
<input type="checkbox" class="cb-element" id="my-checkbox" value="1" />
<label for="my-checkbox">here you click to check or uncheck.</label>
id of 'input' should be value of 'for' attribute of 'label' tag.
'input' 的 id 应该是 'label' 标签的 'for' 属性的值。
Here checkbox id is 'my-checkbox' and in label --for="my-checkbox")--.
这里的复选框 ID 是 'my-checkbox' 和标签 --for="my-checkbox")--。
You can see an example: http://jsfiddle.net/kERYB/21/
你可以看到一个例子：http: //jsfiddle.net/kERYB/21/
回答by skos
You can use .findfor this.
您可以.find为此使用。
$(this).find('input[type=checkbox]').prop("checked", true);
To check uncheck, use this -
要检查取消选中，请使用 -
$('.row').click(function ()
{
var cb = $(this).find(':checkbox');
if (cb.is(':checked')) {
cb.prop('checked', false);
} else {
cb.prop('checked', true);
}
});
Update Fiddle - http://jsfiddle.net/kERYB/14/
更新小提琴 - http://jsfiddle.net/kERYB/14/
回答by ReNiSh A R
$(document).ready(function (){
$('.row').click(function (e){
var cur = $(this).find('input[type=checkbox]');
if(cur.prop("checked"))
{
$(this).find('input[type=checkbox]').prop("checked", false);
}
else
{
$(this).find('input[type=checkbox]').prop("checked", true);
}
});
});
this will be good for you....
这对你有好处......
回答by timo
$('.row').click(function ()
{
if ( $(this).find(".cb-element").prop('checked') == true){
$(this).find(".cb-element").prop('checked', false);
}
else{
$(this).find(".cb-element").prop('checked', true);
}
});
