发表新帖
发表新帖

Select all checkboxes

后端 未结
关注
3 1009
栀梦
栀梦 2020-12-19 18:05

In my Rails app I\'ve created a set of checkboxes as follows:


        
         


        

                      

              相关标签:
3条回答
  • 说谎
    2020-12-19 18:49

    Using jQuery;

    <script type="text/javascript">
      function selectAll(){
        $("input:checkbox").each(function(){
          $(this).attr('checked', true);
        });

        return false;
      }
</script>

    HTML button:

    <a href="#" onclick="selectAll()">Select All</a>
    0 讨论(0)
  • 忘了有多久
    2020-12-19 18:53

    If you use the Prototype JS, you might find this blog post helpful. It gives a fairly concise way to perform a select all.

    http://www.ryboe.com/2008/07/10/select-all-checkboxes-with-prototype-js.html

    In your view you could use the following snippet to create a "Select All" link:

    <%= link_to_function("Select All","checkboxes.each(function(e){ e.checked = 1 })") %>

    In addition, you'd need the following Javascript code somewhere on the same page (or maybe even abstracted out to the public/javascripts/application.js file

    var checkboxes = [];
checkboxes = $$('input').each(function(e){ if(e.type == 'checkbox') checkboxes.push(e) });
var form = $('options'); /* Replace 'options' with the ID of the FORM element */
checkboxes = form.getInputs('checkbox');

    Here's the full source of a working example, if this doesn't work you might need to check to make sure your JS libraries are loading properly.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
      var checkboxes;
      google.load("prototype", "1.6");
      google.setOnLoadCallback(function(){
        checkboxes = [];
        checkboxes = $$('input').each(function(e){ if(e.type == 'checkbox') checkboxes.push(e) });
        var form = $('options'); /* Replace 'options' with the ID of the FORM element */
        checkboxes = form.getInputs('checkbox');
      });
    </script>
  </head>
  <body>
    <form id="options">
      <fieldset><input type="text" value="test"></fieldset>
      <fieldset><input type="checkbox" value=0> 0</fieldset>
      <fieldset><input type="checkbox" value=1> 1</fieldset>
      <fieldset><input type="checkbox" value=2> 2</fieldset>
      <fieldset><input type="checkbox" value=3> 3</fieldset>
    </form>
    <a href="#" onclick="checkboxes.each(function(e){e.checked = 1})">Select All</a>
  </body>
</html>
    0 讨论(0)
  • 醉梦人生
    2020-12-19 18:59

    I think you can use query like that

    <script>
$('#check_all').on("click", function(){
  var check = $('input[type="checkbox"]');
    check.prop("checked", !check.prop("checked"));
});
</script>

    and the html will be something like

    <%= button_tag 'select / unselect all', id: 'check_all', class:'b' %>
    0 讨论(0)
 看不清?
提交回复
热议问题