James Stone
asked on
dynamic created check uncheck boxes
I am trying to get a pretty large form I generate from a database to be able to "check All" or "check None".
I would like to have at the top a checkbox that would check or uncheck every box on the form.
I have sections that I would like to have a check box at the top of each section that would check or check all the items in that section.
I have a jquery script that will check and uncheck the whole form, but I can't figure out how to call a section at time.
I am using php/MSSQL to create the form -- so there variable amounts of sections depending on the page before.
Right now I put the check box id equal to the "StdId"(the name of the section), but if it makes it easier - it can be anything -- I pass the same value in the value field.
Attached is a sample of the output with the jquery that works for all the checkboxes. I like the "indeterminate" state of the checkbox -- not sure if that is HTML or jquery.
test_out.html
I would like to have at the top a checkbox that would check or uncheck every box on the form.
I have sections that I would like to have a check box at the top of each section that would check or check all the items in that section.
I have a jquery script that will check and uncheck the whole form, but I can't figure out how to call a section at time.
I am using php/MSSQL to create the form -- so there variable amounts of sections depending on the page before.
Right now I put the check box id equal to the "StdId"(the name of the section), but if it makes it easier - it can be anything -- I pass the same value in the value field.
Attached is a sample of the output with the jquery that works for all the checkboxes. I like the "indeterminate" state of the checkbox -- not sure if that is HTML or jquery.
test_out.html
You can do this using DOM traversal. The idea is that you have your checkboxes grouped by some DOM element, such as a DIV. In that case, you can use nextAll() to locate the other checkboxes inside that DIV.
Here's a simple example: https://jsfiddle.net/zephyr_hex/8mp1400t/
HTML
jQuery
Here's a simple example: https://jsfiddle.net/zephyr_hex/8mp1400t/
HTML
<div>
<span>Section 1</span>
Check All<input type="checkbox" class="checkAll">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
<div>
<span>Section 2</span>
Check All<input type="checkbox" class="checkAll">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
<div>
<span>Section 3</span>
Check All<input type="checkbox" class="checkAll">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
jQuery
$(document).ready(function() {
$('.checkAll').on('click', function() {
var checkAll = $(this);
var isChecked = checkAll.is(':checked');
checkAll.nextAll('input:checkbox').prop('checked', isChecked);
});
});
ASKER
hielo,
I think I fixed all the issues you pointed out (was in a hurry and just wrote it poorly) - It is still doing what it did before - the top checkbox will check and uncheck every checkbox on the form - the select all under top ones don't do anything.
Megan,
I think what you are saying makes sense, but I think I need to refer to the checkboxes some other way than the class as when I change the class name and use your script then the top check box checks and unchecks all but the other select all checkboxes.
Can I refer to the name of a div and do all the checkboxes inside that div (and not refer to the checkbox class)?
I have attached what the output is for this again (with the changes to the ids and syntax) with the other "select all" boxes having class="checkAll"
Thanks for taking the time to answer
james
test_out.html
I think I fixed all the issues you pointed out (was in a hurry and just wrote it poorly) - It is still doing what it did before - the top checkbox will check and uncheck every checkbox on the form - the select all under top ones don't do anything.
Megan,
I think what you are saying makes sense, but I think I need to refer to the checkboxes some other way than the class as when I change the class name and use your script then the top check box checks and unchecks all but the other select all checkboxes.
Can I refer to the name of a div and do all the checkboxes inside that div (and not refer to the checkbox class)?
I have attached what the output is for this again (with the changes to the ids and syntax) with the other "select all" boxes having class="checkAll"
Thanks for taking the time to answer
james
test_out.html
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks to both for your help,
james
james
<!-- here, the name attribute should be name='label[]' ; with the apostrophe immediately after the = sign -->
<input type='hidden' name=label'[]' value='CRNODE02'>
<!-- the same issue with the name attribute as above. Additionally, you should be quoting the id and the value as well, so intead of-->
<input type='checkbox' name=CRNODE02'[]' class='select_one' id=CRNODE02 value=11011401:CRNODE02 checked >
<!-- you should use -->
<input type='checkbox' name='CRNODE02[]' class='select_one' id='CRNODE02' value='11011401:CRNODE02' checked >
Lastly, an element's id should be unique. You are duplicating a lot of ids. Having said that, if you fix at least the quoting issues outlined above, the javascript below should accomplish what you want.
Open in new window
Regards,
Hielo