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

Answer 1

您可以在没有if条件的情况下执行此操作。

<强> Working Demo

<强> Jquery的

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

更新（带变量）See Demo

<强>的jQuery

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

更新2：修正了阻止输入See Demo

的错误

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

更新3：没有jQuery See Demo

用label

换行

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

更新4：要排除select代码See Demo

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

Answer 2

试试这个：

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

Try in fiddle

<强>更新

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

Answer 3

您可以使用.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);
    }
});

更新小提琴 - http://jsfiddle.net/kERYB/14/

Answer 4

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

这对你有好处....

Answer 5

您只需使用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'，标签为--for =“my-checkbox”） - 。

您可以看到一个示例：http://jsfiddle.net/kERYB/21/

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/

onClick Div选中未选中复选框

6 个答案: