选择所有复选框…以及javascript和rails

Question

I'm running into some type of error here. Nothing is happening. Does anyone have idea idea why?

Thank you beforehand!

      -form_tag :action => 'form', :name =>'admin_form' do 
       #images_actions_bar
        .select_all
          =check_box_tag('check_all', 'check_all', false, :onClick => "$$('admin_form input.check').each(function(box){box.checked=true});return false;")

==============

thanks. what ultimately worked for me was a check box like this:

 =check_box_tag('check_all', 'check_all', false, :onClick => "checkAll(document.admin_form.check_all, document.admin_form.checkbox);")

and a js function like this:

function checkAll(field_main, fields){
if(field_main.checked == true){
    for (i = 0; i < fields.length; i++)
        fields[i].checked = true ;
}else{
    for (i = 0; i < fields.length; i++)
        fields[i].checked = false;
}

Answer 1

The answer posted in the original question got me started but I ran into problems because my checkboxes are named message_id[] . The brackets were causing JS syntax errors.

Following a pattern in this thread , I got around this by looping through all the input fields on the form and then operating explicitly on the ones with type="checkbox" .

This code in my view creates the Check All checkbox (intentionally without a label):

<%= check_box_tag('check_all', 'check_all', false, :onClick => "checkAll(this);") %>

which uses this JavaScript:

function checkAll(check_all){
  // Pass in a named "Check All" checkbox that appears on the same form where all 
  // checkboxes should be checked.

  // Loop through an array containing ALL inputs on same form as check_all
  var inputs = check_all.form.getElementsByTagName("input");
  for (var i = 0; i < inputs.length; i++) {  
    // Only work on checkboxes, and NOT on the "Check All" checkbox
    if (inputs[i].type == "checkbox" && inputs[i].name != check_all.name) { 
      if(check_all.checked == true){
        inputs[i].checked = true ;
      }else{
        inputs[i].checked = false ;
      }
    }  
  }  
}

Answer 2

function checkAll(check_all){
  // Pass in a named "Check All" checkbox that appears on the same form where all 
  // checkboxes should be checked.

  // Loop through an array containing ALL inputs on same form as check_all
  var inputs = check_all.form.getElementsByTagName("input");
  for (var i = 0; i < inputs.length; i++) {  
    // Only work on checkboxes, and NOT on the "Check All" checkbox
    if (inputs[i].type == "checkbox" && inputs[i].name != check_all.name) { 
      inputs[i].checked = check_all.checked ;
    }  
  }  
}

Answer 3

It's not clear what javascript framework you're using. I've really only used jQuery and (minimally) Prototype. So, I'd check that admin_form is selecting the form element properly. In jQuery, it would have to be form[name="admin_form"]

I've modified a check/uncheck all jquery piece that I previously wrote. Hopefully it may help. First, clicking "check_all" will check all checkboxes. Clicking a checkbox will then uncheck the "check_all" checkbox.

$('#check_all').click(function() {
    var checkboxes = $('form[name="admin_form"] > input:checkbox');
    $(checkboxes).each(
        function(){
            this.checked = $('#check_all').attr('checked');
        }
    );
});
$('form[name="admin_form"] > input:checkbox').click(function() {
var checkAll = $('#check_all');
if ($(checkAll).is(':checked') && !($(this).is(':checked')))
     { $(checkAll).removeAttr('checked'); }
 });