单击Div时切换复选框的状态（选中/未选中）

Question

我有多个基于Div的行。每一行都包含一个复选框。

我希望在点击行的任何位置时，它都可以选中或取消特定的复选框。

这是我到目前为止尝试过的DEMO：http://jsfiddle.net/kERYB/19/ JS：

$('.row').click(function ()
{
    $(this).closest(":checkbox").attr("checked", checked");
});

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：

.row {
    width:300px;
    padding:4px;
    border:1px solid #000;
    margin:2px;
} 

.left {
    float:left;
    width:50px;
}

.right {
    float:right;
}

.clear {
    clear:both;
}
}

- user2857239

Answer 1

您可以不使用 if 条件语句来完成此操作。

演示Demo

JQuery

$('.row').click(function ()
{
   $(this).find('input[type=checkbox]').prop("checked", !$(this).find('input[type=checkbox]').prop("checked"));
});

更新（带有变量）查看演示

jQuery

$('.row').click(function ()
{
    var checkbox = $(this).find('input[type=checkbox]');
   checkbox.prop("checked", !checkbox.prop("checked"));
});

更新2：修复了在点击输入时出现的错误。 查看示例

$('input[type=checkbox]').click(function (e)
{
     e.stopPropagation();
         return true;
});

更新3：不使用jQuery 查看演示 用 label 包装行。

<label>
<div class="row">
...
</div>
</label>

更新4：为了排除select标签请参见演示

$('input[type=checkbox], .row select').click(function (e)
{
     e.stopPropagation();
         return true;
});

- Surjith S M

---

当单击复选框时，为什么它们不起作用？ - user2857239

例如，每一行都有一个下拉菜单，如果我点击该下拉菜单，它不应更改复选框的状态。 - user2857239

@user2857239 请查看更新4。 - Surjith S M

太好了，如果我有<a>标签和<img>标签怎么办？我也想忽略它们的操作。 - user2857239

@user2857239 你可以通过像这样使用逗号来添加元素：,.row select, .row a, .row img。 - Surjith S M

让我更新这个 fiddle，用一个 a 标签包裹 img 标签。 - user2857239

Answer 2

尝试使用这个：

    $('.row').click(function ()
    {
        $(this).find('div:first input:checkbox').prop('checked', true)
    }    
);

Try in fiddle

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

Try in fiddle

- Ishan Jain

---

如果复选框被选中，它也应该被取消选择。 - user2857239

Answer 3

你可以简单地使用HTML完成它。

<input type="checkbox" class="cb-element" id="my-checkbox" value="1" />
<label for="my-checkbox">here you click to check or uncheck.</label>

'input'标签的id应该是'label'标签的'for'属性的值。

这里复选框的id是'my-checkbox'，而在'label'标签中则是 --for="my-checkbox"--。

你可以参考这个例子：http://jsfiddle.net/kERYB/21/

- mahfuz

---

✨ _提醒_：在 ReactJS 中，您将使用 htmlFor。 - Omar Trkzi

Answer 4

你可以使用 .find 来实现这个功能。

$(this).find('input[type=checkbox]').prop("checked", true);

http://api.jquery.com/find/

要选中或取消选中，请使用此代码 -

$('.row').click(function ()
{
    var cb = $(this).find(':checkbox');
    if (cb.is(':checked')) {
      cb.prop('checked', false);
    } else {
      cb.prop('checked', true);
    }
});

更新 Fiddle - http://jsfiddle.net/kERYB/14/

意思是更新 jsFiddle 这个在线代码编辑器中的代码，链接为 http://jsfiddle.net/kERYB/14/。

- skos

---

如果已经选中，它也应该取消选中。 - user2857239

Answer 5

$(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);
        }
    });
});

这对你来说会很好....

- ReNiSh AR

Answer 6

$('.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);
}
});

http://jsfiddle.net/kERYB/13/

- timo