用表格单元格点击来切换JQuery复选框输入。

Question

我希望能够实现这样一个功能：当你点击表格单元格内的任何位置时，将切换单元格内的复选框。如果直接点击复选框，则应正常工作。

在此示例中，我使用了一个带有红色边框的空白“标签”作为可单击区域。理想情况下，我想避免使用标签。

http://jsfiddle.net/WPZf2/

<tr>
    <td><label><input type="checkbox"/></label></td>
    <td><input type="checkbox"/></td>
    <td><input type="checkbox"/></td>
</tr>   

这里检测到了表格单元格的点击。

http://jsfiddle.net/WPZf2/1/

    $('td').click(function(){
        alert('click!');

如果返回false并且复选框被点击，则复选框最初被选中，但当您关闭警告弹出窗口后，复选框会再次清除。（至少在Chrome、Firefox和IE11中）

http://jsfiddle.net/WPZf2/2/

    $('td').click(function(){
        alert('click!');
        return false;

我尝试过使用 return false 和不使用 return。如果您点击单元格，则可以正常工作，但如果您点击复选框，则无法正常工作。

http://jsfiddle.net/WPZf2/3/

var $elem = $(this).find('input');
$elem.prop('checked', !$elem.prop('checked'));

如果我使用$elem.click()而没有返回语句，它会有相同的问题。

http://jsfiddle.net/WPZf2/4/

$elem.click();

如果我有“return false”，它根本不起作用：

http://jsfiddle.net/WPZf2/5/

基本上，我希望能够在单元格的任何位置（包括直接在复选框上）单击以切换复选框。

- Luke Wenke

Answer 1

这里是另一种替代方法。

$(function(){
   $('td').click(function (event) {
     if (!$(event.target).is('input')) {
        var obj =$(this).find('input');      
        obj.prop('checked', !obj.is(':checked'));      
       }
   });
});

FIDDLE

- Raju Padhara

---

很好，它只在一个函数中而不是两个函数中。 - Luke Wenke

Answer 2

http://jsfiddle.net/WPZf2/18/

$('td').click(function(){
    $(this).find(':checkbox').click();
});

$(":checkbox").click(function(e) {
     e.stopPropagation();        
});

- Luke Wenke

Answer 3

尝试这个。

$(function(){
    $('td').click(function(){
        //alert('click!');
        var $elem = $(this).find('input');
        $elem.prop('checked', !$elem.prop('checked'));
        //$elem.click();
//        return false;
    });
    $('input[type="checkbox"]').click(function(){
        $(this).prop('checked',!$(this).prop('checked'));
    })
});

- Subbu

Answer 4

试试这个：

$('td, input').click(function (event) { // add input in the selector
    event.stopPropagation(); // stop the event bubble up
    var tgl = !$(event.target).is('input') && 
              !$('input:checkbox:checked', this).length ? true : false;
     // above we checked if target is not input and checked input is 
     // not there initially
    $('input:checkbox', this).prop('checked', tgl);
});  //---------------------------------------^^^---passing the boolean value

演示

- Jai

---

一行代码可以简化为：var tgl = !$(event.target).is('input') && !$(':checked', this).length; - Luke Wenke

@LukeWenke 这只是为了可读性和在此答案帖子中删除滚动条。尽管演示只有一行。 - Jai

我将 "input:checkbox:checked" 更改为 ":checked"，并删除了 "? true : false"。 - Luke Wenke

Answer 5

发现了答案！

jQuery 点击 td 切换复选框

http://jsfiddle.net/WPZf2/6/

$('td').click(function (event) {
  if (!$(event.target).is('input')) {

      $('input:checkbox', this).prop('checked', function (i, value) {
         return !value;
      });
   }

- Luke Wenke