Avatar of James Stone
James Stone
Flag for United States of America 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
HTMLjQueryJavaScript

Avatar of undefined
Last Comment
James Stone

8/22/2022 - Mon
hielo

Currently you have a lot of instances of misquoted attribute values -ex:
<!-- 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.


<script language= "javascript">
$(function () {
    $('#select_all').change (function () {
        $('.select_one').prop('checked', $(this).prop('checked'));
    });
    
    $('.select_one').change (function () {
        if ($('.select_one:checked').length === 0) {
            $('#select_all').
                prop("indeterminate", false).
                prop('checked', false);
        } else if ($('.select_one:not(:checked)').length === 0) {
            $('#select_all').
                prop("indeterminate", false).
                prop('checked', true);
				
        } else {
            $('#select_all').
                prop("indeterminate", true);
        }
		
		$('input[type=checkbox][name^='+this.id+']').prop('checked',this.checked);
		
    });     
});
</script>

Open in new window


Regards,
Hielo
zephyr_hex (Megan)

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

Open in new window


jQuery
$(document).ready(function() {
  $('.checkAll').on('click', function() {
  var checkAll = $(this);
    var isChecked = checkAll.is(':checked');
    checkAll.nextAll('input:checkbox').prop('checked', isChecked);
  });
});

Open in new window

James Stone

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
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
ASKER CERTIFIED SOLUTION
hielo

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
SOLUTION
zephyr_hex (Megan)

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
James Stone

ASKER
Thanks to both for your help,
james