Question

如果我在列中有3个复选框，单击任意复选框，我想在整列中设置复选框的值（不是行）

如果选中/取消选中第二列中的复选框，我希望选中/取消选中同一列（第二列）中的所有其他复选框。

这是我试图实现的代码::

UPDATE tablename SET widget='xxx' WHERE widget='zamu';
UPDATE tablename SET widget='yyy' WHERE widget='flabu';

Answer 1

如果我理解正确，您希望同时选中或取消选中所有3个复选框。这应该适合你。

$(document).on('click', '.class1, .class2, .class3', function(){
    var checked = $(this).prop('checked');
    if(checked === true) {
        $('.class1, .class2, .class3').prop('checked', true);
    }
    else {
        $('.class1, .class2, .class3').prop('checked', false);
    }
});

请记住将'.class1，.class2，.class3'更改为您正在使用的任何类。

Answer 2

您可以使用.index() method找出点击的列。

在点击处理程序中，this是单击的复选框，因此$(this).closest("td").index()将为您提供行中包含td的从零开始的索引。

然后您可以使用nth-child() selector（从一个计算，而不是零）来获取该列中的所有项目。

您没有显示您的HTML，因此我根据您可以看到的非常简单的<table>结构对以下内容进行了编码：

＆＃13;

var table = $("table").on("click", ":checkbox", function() {
  var column = $(this).closest("td").index() + 1
  table.find("td:nth-child(" + column + ") :checkbox").prop("checked", this.checked)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
  <tr><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
  <tr><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
  <tr><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
</table>

＆＃13;

Answer 3

根据jQuery文档，根据您的版本，可以根据需要进行一些调整。 https://api.jquery.com/prop/

<div class="column">check one:
  <input type="checkbox" value="a">
  <input type="checkbox" value="b">
  <input type="checkbox" value="c">
</div>
<script>
$("input[type='checkbox']").click( function(){ 
  var checked = $(this).prop("checked");
  // console.log(checked,typeof checked);
  if( checked === true ){
    $(this).siblings("input[type='checkbox']").prop("checked",true);
  }else{
    $(this).siblings("input[type='checkbox']").prop("checked",false);
  }
} );
</script>

我在这里使用了.siblings，但还有很多其他方法可以做到。

修改：使用@ottiem

的输入

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

请注意this.checked以上使用了javascript＆＃39; this，而不是jQuery＆＃39; $(this)

Jquery：设置复选框的值

3 个答案: