1

I've made a simple form using Ryan Fait's Custom Form Elements. Now I am trying to implement a "Check All"/"Uncheck All" function.

What I have mostly works, except that the user has to click the buttons twice to get the desired result. I have a feeling that I need to call this function from inside the Custom Form Elements script, but I don't know how.

I'm using JQuery, Custom Form Elements (http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/custom-form-elements.js), and this:

<script type = "text/javascript">
function cboxToggle(group, action) {
for( var i=0, len = group.length; i < len; i++) {
group[i].checked = action;
}
}

</script>

My HTML:

<form name="myname" action="checkboxes.asp" method="post">
<input type = "button" value = " CHECK ALL" onclick = "cboxToggle(check_list, !this.checked)"><br>
<input type = "button" value = " UNCHECK ALL" onclick = "cboxToggle(check_list, this.checked)"><br>

<p><input type="checkbox" name="check_list" value="1" class="styled" />Option 1 </p> 
<p><input type="checkbox" name="check_list" value="2" class="styled" />Option 2 </p>
<p><input type="checkbox" name="check_list" value="3" class="styled" />Option 3 </p>
</form>

Any help would be appreciated -- thanks!

2 Answers 2

0

If you're using jQuery then why not use it to its full potential? Which also means, no inline code... Add an id to your buttons first. Then make sure you're using groups properly, so instead of group you do group[]. Then use this code and it should work:

var ckToggle = function (group, action) {
  $('[name="'+ group +'"]').prop('checked', action)
}

$('#buttonAll').click(function(){ ckToggle('check_list[]', true) })
$('#buttonNone').click(function(){ ckToggle('check_list[]', false) })
5
  • Thanks for the quick reply, elclanrs! I must be missing something. I gave each of the buttons the ids and replaced my JS with yours. Is there anything else I need to do?
    – beckilinn
    Jul 5, 2012 at 21:19
  • Got it working here jsfiddle.net/elclanrs/MXVne. I missed a quote so maybe that's why it wasn't working, check the code again.
    – elclanrs
    Jul 5, 2012 at 21:24
  • It looking great in your jsfiddle, but for some reason it's not working on my server. Feeling stupid, I'm sure it's something obvious. See my test page here: devel.isetgroup.com/js-playground/test.html
    – beckilinn
    Jul 5, 2012 at 22:09
  • Yes - that's what was missing. Thanks. Works great with default form elements, but I still have the same problem with the custom form elements. I have to click the buttons twice to get them to work.
    – beckilinn
    Jul 6, 2012 at 2:11
  • I enhanced my test example to include the Custom Form Elements.js: devel.isetgroup.com/js-playground/test.html
    – beckilinn
    Jul 6, 2012 at 2:18
0

Check out the following URL

Uncheck checkbox in custom form elements

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.