当用户点击一个按钮时，你如何选择所有复选框

Question

我有一个带有“全选”按钮和一堆复选框的窗体。我想让它在用户点击“全选”按钮时选中所有复选框。

在jQuery中有没有优雅的方式来做到这一点？

编辑＃2：我已经将问题隔离到此代码; style =“display：none;”。如果我删除此代码，它工作正常。有任何想法吗？

编辑：下面的答案在我的测试表单中工作，但在这种情况下的按钮是在一个div内，只显示为simpledialog.show（）的一部分的窗体内。在这种情况下，由于某种原因，当我按一下按钮我没有看到任何事情发生：

的javascript：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#sdHc3').simpleDialog({ 
     showCloseLabel: false, 
     open: function() { 
      $('#checkboxStatus').html(''); 
     }, 
     close: function() { 
      var c = []; 
      $('#checkboxForm :checkbox:checked').each(function() { 
       c.push($(this).val()); 
      }); 
      $('#checkboxStatus').html('&nbsp;&nbsp;Checked <b>' + c.join(', ') + '</b>.').show(); 
     } 
    }); 

}); 

<script type="text/javascript"> 
$(function() { 
$('#selectAll').click(function() { 
     var select_all = (this.value === 'Select All'); 
     $(':checkbox').attr('checked', select_all); 
     this.value = (select_all) ? 'Deselect All' : 'Select All'; 
    }); 
}); 

体：

<div style="display: none;" class="scrollableDiv" id="simpleDialog3"> 
    <h3>DEMO3</h3> 
    <form id="checkboxForm"> 
    <input type="button" id="selectAll" value="TT" /> 
    <input type="checkbox" class="chckbx" value="1" /><br /> 
    <input type="checkbox" class="chckbx" value="1" /><br /> 
    </form> 
    <p> 
     <a href="#" class="close">Close</a></p> 
</div> 

任何想法wh在这种情况下它不起作用？

Answer 1

$(function(){ 
    $('#myButton').click(function(){ 
     var select_all = (this.value === 'Select All'); 
     $('input:checkbox').attr('checked', select_all); 
     this.value = (select_all) ? 'Deselect All' : 'Select All';   
    }); 
}); 

尝试在对话框实例化之前放置此代码。

看起来你可能想切换到jQuery UI Dialog。

Answer 2

有点击将选择页面上的所有复选框，当你的按钮调用这个：

jQuery("input:checkbox").attr('checked','checked'); 

可以更改选择器（“输入：勾选”），以提供更好的上下文（以及可能加速它的执行作为孔）

• Attr()
• :checkbox

Answer 3

只是给所有的复选框的一类，并且附上这个jQuery的按钮：

$(document).ready(function() { 
    $('#myButton').click(function() { 
    $('.checkbox').attr('checked','checked'); 
    }); 
} 

假设您的按钮具有ID =“myButton的”和你的复选框有类=“复选框”。

Answer 4

因此，如果您选择 - 所有按钮有一个ID选择，所有你说：

$('#select-all').click(function(){ 
    $('input:checkbox').attr('checked', 'checked'); 
); 

Answer 5

在我想相同的功能情况下，它通常是与复选框向下行的表旁边。在这种情况下，您可以包含此代码段，然后每当标题单元格中出现复选框时，下方列中的所有相关复选框将根据其值打开/关闭。

假设HTML这样的：

<table> 
    <thead> 
     <tr> 
      <th><input type="checkbox" /></th> 
      <th>...</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="checkbox" name="row[0]" /></td> 
      <td>...</td> 
     </tr> 
     ... 
    </tbody> 
</table> 

这里是jQuery的：

$('th input:checkbox').click(function() { 
    var $this = $(this), 
     colNum = $this.closest('th').prevAll('th').length, 
     checked = $this.attr('checked') 
    ; 
    $this 
     .closest('table') 
     .find('tbody > tr') 
     .each(function() { 
      $(this) 
       .children("td") 
       .eq(colNum) 
       .find("input:checkbox") 
       .attr('checked', checked) 
      ; 
     }) 
    ; 
}); 

它不需要任何额外的ID或类或任何东西，可连续工作复选框的多列，这是不错。这里有一个演示页面：http://jsbin.com/eqeno