I’m looking for a clean way to implement the infamous “select all” checkbox, but I’d prefer a JavaScript-free solution. Does anyone know if there is a way to do that?
Thank you in advance
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I’m looking for a clean way to implement the infamous “select all” checkbox, but I’d prefer a JavaScript-free solution. Does anyone know if there is a way to do that?
Thank you in advance
While it is possible to achieve part of this functionality without the use of JavaScript, I wouldn’t recommend it as it doesn’t work in older browsers.
You could use the CSS3
:targetpseudo-class to toggle between different<form>s in your markup. Demo: http://jsfiddle.net/mathias/kFH3e/As you can see, it doesn’t really “toggle” the checkboxes, but just the forms; and if you’ve already checked some boxes in one of the form it will still be checked after you switch back and forth.
This is one of the cases where it’s perfectly acceptable to use JavaScript, as the “select all/none” buttons only enhance the UI; it’s still an acceptable experience without them.
TL;DR It’s okay to use JavaScript in this case.