Menu
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
617
You can insert form controls like check boxes, option, or toggle buttons to make data entry easier. Check boxes work well for forms with multiple options. Option buttons are better when your user has just one choice. Toggle buttons indicate a state between an enabled or disabled state when the button is clicked.
With pure JavaScript, you can use the checkbox's checked property to set the checked state of a checkbox. However, you need to toggle the checked property individually for each checkbox to implement the toggle functionality.
Toggle switches are best used for changing the state of system functionalities and preferences. Toggles may replace two radio buttons or a single checkbox to allow users to choose between two opposing states.
transitive verb. 1 : to fasten with or as if with a toggle. 2 : to furnish with a toggle. 3 : to switch between two different options for (something, such as a computer setting) usually by pressing a single button or a simple key combination toggle the sound on a computer off and on.
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.
59
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.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
