Question

我正在尝试在jQuery中创建一个'select all'样式复选框。这是当前的标记：

<table>
  <thead>
     <tr>
       <th><input class='select-all' type='checkbox' /></th>
        //etc..
     </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class='list-select' type='checkbox' /><td>
     //etc..
    </tr>
    //more <tr>s..
  </tbody>
</table>

从select all复选框的click事件中获取所有'list-select'复选框的最简单方法是什么？

$(".select-all").click(function() {

});

页面上可能有多个这样的内容，因此它必须是相对的。即我不能只使用$(".list-select")

Answer 1

这是一个简单的小例子：http://jsfiddle.net/ru3Nv/

核心是：

$('.select-all').click(function(){
    $(this).parents('table').find('.list-select').prop("checked", $(this).prop("checked"));
});

请注意，我还建议在.list_select框中添加侦听器，以便在取消选中其中任何一个时，select all将变为未选中状态，如果单独检查所有选项，则也会选中all all。 / p>

Answer 2

如果选中全部复选框始终位于表格的<thead>中，则可以使用：

$(this).parents('table').find('.list-select').prop('checked', true);

Answer 3

（抱歉，首先误读了问题。）

可能会转到最近的table，然后转到.list-select：

var select = $(this).closest('table').find('.list-select');

（this将是点击的.select-all，因为它位于事件处理程序中。）

closest从您提供的元素开始，然后向上移动到层次结构中以找到匹配项，并在找到的第一个元素处停止。然后find是相反的，它从那里找到与选择器匹配的后代元素。

Answer 4

我认为你试图实现这个目标：

$(".select-all").change(function(){
  if($(this).attr("checked")=="checked"){
    $(".list-select").attr("checked","checked");
  }
  else{
    $(".list-select").removeAttr("checked");
  }
});

这为您的.select-all复选框提供了选择和取消选择所有.list-select复选框的功能。

Answer 5

尝试以下代码。这是Check for Checking复选框和所有Checkbox。将模式用于单个复选框=＆gt; ＆＃34; chkSelect - ＆＃39; AnySignificantName＆＃39;＆＃34;并为所有复选框=＆gt; ＆＃34; chkSelect - ＆＃39; AnySignificantName＆＃39; - 所有＆＃34;利用这种逻辑。

例如，使用类＆＃34; cheSelect-Grid-All＆＃34;对于复选框＆＃34; cbSelectAll1＆＃34;标题和＆＃34; cheSelect-Grid＆＃34;对于表体行。

foreach (var item in oldProgramacionSemanal.ProgramacionSemanalDetalles)
{
    var producto = await _repository.GetProductoAsync(item.ProductoId);
    if (producto == null)
        return BadRequest();

    var ubicacion = await _repository.GetUbicacionAsync(item.UbicacionId);
    if (ubicacion == null) 
        return BadRequest();

    var programacionSemanalDetalles = _repository.GetProgramacionSemanalDetalles(item.ProgramacionSemanalDetalleId)
    programacionSemanalDetalles.Producto = producto;             
    programacionSemanalDetalles.Ubicacion = ubicacion;
    programacionSemanalDetalles.Usuario = currentUser;

    // if some item properties changed
    //programacionSemanalDetalles.SomeProperty = item.SomeProperty;
}

使用jquery获取包含表中的所有输入

5 个答案: