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

hielo

Currently you have a lot of instances of misquoted attribute values -ex:

<input type='hidden' name=label'[]' value='CRNODE02'>


<input type='checkbox' name=CRNODE02'[]' class='select_one' id=CRNODE02 value=11011401:CRNODE02 checked >


<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

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

zephyr_hex (Megan)

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

James Stone

ASKER

Thanks to both for your help,
james