Toggle Checkbox

Question

Hello all,

I have 4 checkboxes and I wish to toggle them (checked or unchecked) and they should all be the same what ever state they are in. I have this so far:

var toggle_click = false;

function check_them(element){

    if(toggle_click){
        $('#'+element+'_1').attr('checked', true);
        $('#'+element+'_2').attr('checked', true);
        $('#'+element+'_3').attr('checked', true);
        $('#'+element+'_4').attr('checked', true);
    }

    if(!toggle_click){
        $('#'+element+'_1').attr('checked', false);
        $('#'+element+'_2').attr('checked', false);
        $('#'+element+'_3').attr('checked', false);
        $('#'+element+'_4').attr('checked', false);
    }

    if(!toggle_click){ toggle_click = true;   }
    if(toggle_click) { toggle_click = false;  }
}

On page load some of the checkboxes may be ticked or not ticked - but once I click a link and run this function, I want these checkboxes to go all to the same state.

When I try the above, it just doesn't seem to tick the boxes and sometimes it ticks them all and running this function again does nothing. What is going on? I am coffee deprived and confused!

Should be making use of a checkbox group or something?

Thanks all for any help

Answer 1

Instead of setting the attribute checked to false, just remove it altogether! :)

$('#'+element+'_1').removeAttr('checked');

Here's an example:

var state = $("#element1").attr("checked") === "checked" ? true : false;
$("#test").click(function(){    
    $("input[id^=element]").each(function(){
        if(state === false){
            $(this).attr("checked", "checked");
        }else{
            $(this).removeAttr("checked");
        }
    });
    state = !state;        
});

Answer 2

Checked is a 'funny' attribute. One thing I'd suggest is rather than attr('checked', false), try removeAttr('checked') instead.

Basically, in the DOM, the rendered element will have checked as an attribute, or if it's being XHTML compliant, checked=checked. So, setting it to false isn't the right thing to do.

As far as the other issues, I'm not enough of a jQuery pro yet to know.

Answer 3

Make sure that you don't call check_them before the DOM is finished loading

$(function() {
    check_them("whatever");
});

Also, you can simplify this whole thing to the following:

var check_them = (function() {
    var is_checked = false; // Now this is not global, huzzah
    return function(element) {
        // You can update all of the elements at once
        $('#'+element+'_1, #'+element+'_2, #'+element+'_3, #'+element+'_4').attr('checked', !is_checked);
        is_checked = !is_checked;
    };
})();

Answer 4

........

var isChecked = false;

function check_them(element){

    if(isChecked === false) {
        $('#'+element+'_1').attr('checked', true);
        $('#'+element+'_2').attr('checked', true);
        $('#'+element+'_3').attr('checked', true);
        $('#'+element+'_4').attr('checked', true);
        isChecked = true;
    }
    else
    {
        $('#'+element+'_1').attr('checked', false);
        $('#'+element+'_2').attr('checked', false);
        $('#'+element+'_3').attr('checked', false);
        $('#'+element+'_4').attr('checked', false);
        isChecked = false;
    }
}

Answer 5

Well, for different approach: Sets checkboxs all to whatever it wasn't:

var toggle_click = false;
function setCheck(mythis)
{
    $('#'+element+'_1').checked = !mythis.checked;
    $('#'+element+'_2').checked = !mythis.checked;
    $('#'+element+'_3').checked = !mythis.checked;
    $('#'+element+'_4').checked = !mythis.checked;
    toggle_click = !toggle_click;
};
$(function() { 
  $('#'+element+'_1').click(function() {
    setCheck(this);
  });
  $('#'+element+'_2').click(function() {
     setCheck(this);
  });
  $('#'+element+'_3').click(function() {
    setCheck(this);
  });
  $('#'+element+'_4').click(function() {
      setCheck(this);
  });
});

NOTE IF you give them a class called "mycheckbox" even simpler:

var toggle_click = false;
$(function() { 
  $('.mycheckbox').click(function() {
    $('.mycheckbox').each().checked = !this.checked;
    toggle_click = !toggle_click;
  });
});