We help IT Professionals succeed at work.

dynamic created check uncheck boxes

James Stone
James Stone asked
on
139 Views
Last Modified: 2017-03-27
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
Comment
Watch Question

CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
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
CERTIFIED EXPERT
Top Expert 2010

Commented:
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 Stonewarehouse manager

Author

Commented:
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
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT
Top Expert 2010
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
James Stonewarehouse manager

Author

Commented:
Thanks to both for your help,
james
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.