Toggle Checkbox

Question

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

On the last two rows, if toggle_click is false, set it to true, then if it's true, set it to false. No matter what its initial value is, it will always be false in the end. I'd replace those with toggle_click = !toggle_click;… and use one for-loop for the whole thing where the value of toggle_click goes after 'checked'. — LGT
– LGT, Commented Feb 14, 2017 at 22:24

Sarfraz · Accepted Answer · 2010-03-02 12:33:31Z

8

........

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;
    }
}

answered Mar 2, 2010 at 12:33

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abs Over a year ago

Oh dear - what happened to me. If and bloody else should be used! Thanks Sarfraz!

Justin Johnson Over a year ago

This is unnecessarily verbose

Sarfraz Over a year ago

@Justin Johnson: yes it is but i just did and fixed what he was doing, of course it can be shortened :)

dimitry_n · Accepted Answer · 2016-03-17 16:41:17Z

8

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.

edited Mar 17, 2016 at 16:41

dimitry_n

3,0291 gold badge33 silver badges53 bronze badges

answered Mar 2, 2010 at 12:30

Mikezx6r

16.9k7 gold badges36 silver badges31 bronze badges

Comments

cheth · Accepted Answer · 2012-11-28 03:05:09Z

4

$('tr').click(function(){
        var chkbox = document.getElementById("chk"+this.id);
        chkbox.checked = !chkbox.checked;

    });

answered Nov 28, 2012 at 3:05

cheth

491 silver badge1 bronze badge

1 Comment

ixe013 Over a year ago

Can you elaborate on your answer ? It looks good, but I don't see why you use tr

Hugo Ham · Accepted Answer · 2017-06-09 01:33:30Z

2

It can also be done using only javascript without troubles, you can use an image or anything that lets you click it too.

<html>
  <body>
    <a href=" javascript:check();"> Toggle </a> <br>
    <input type="checkbox" id="c1" > Un/Check me <br>
    <input type="checkbox" id="c2" > Un/Check me
  </body>
</html>

<script>
function check()
{
  c1.checked = !c1.checked;
  c2.checked = !c2.checked;
}
</script>

I hope this helps.

answered Jun 9, 2017 at 1:33

Hugo Ham

213 bronze badges

Comments

Mark Schultheiss · Accepted Answer · 2010-03-02 13:09:12Z

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;
  });
});

Alex Weber · Accepted Answer · 2010-03-02 12:38:36Z

0

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;        
});

edited Mar 2, 2010 at 12:38

answered Mar 2, 2010 at 12:30

Alex Weber

2,1862 gold badges19 silver badges27 bronze badges

2 Comments

Justin Johnson Over a year ago

$("#element1").attr("checked") === "checked" Isn't boolean enough for you? ` ? true : false` can be dropped altogether.

Alex Weber Over a year ago

If you read the rest of the code you would see that since the property is removed the attribute is either TRUE or UNDEFINED. Thanks for the bogus -1.

Justin Johnson · Accepted Answer · 2010-03-02 12:47:59Z

0

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;
    };
})();

edited Mar 2, 2010 at 12:47

answered Mar 2, 2010 at 12:32

Justin Johnson

31.4k7 gold badges67 silver badges89 bronze badges

Collectives™ on Stack Overflow

Toggle Checkbox

7 Answers 7

3 Comments

Comments

1 Comment

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

1 Comment

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related