Home/ Questions/Q 6170533
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T23:03:10+00:00

I am creating a form with multiple checkboxes with the same name. I have

  • 0

I am creating a form with multiple checkboxes with the same name. I have included an option for the user to select the parent checkbox to check all the children. The javascript code below is used to select or deselect all check boxes. 

function checkAll(field)
{
  i = 0;
  if(field[i].checked)
  {
    uncheckAll(field);
  }
  else
  {
    for (i = 0; i < field.length; i++)
      field[i].checked = true ;
  }
}

function uncheckAll(field)
{
  for (i = 0; i < field.length; i++)
  field[i].checked = false ;
}

Basically what I want to do is process the selections, when the form is submitted, by grabbing the children checkboxes that were selected using $_POST and do a database query, but in order for all the children checkboxes with the same name to show up in $_POST in an array, they need to have the square brackets attached to them, which unfortunately isn’t supported by the javascript.

<div class ="county-select">
    <div><label for="franklin">Franklin County</label><input name="county[]" value="franklin" type="checkbox" class="noBorderIE" onClick="checkAll(document.frmEventExport.townF)" /></div>
    <div><label for="oxford">Oxford Hills</label><input name="county[]" value="oxford" type="checkbox" class="noBorderIE" onClick="checkAll(document.frmEventExport.townO)" />  </div>
    <div><label for="river-valley">River Valley</label><input name="county[]" value="river-valley" type="checkbox" class="noBorderIE" onClick="checkAll(document.frmEventExport.townR)" /></div>
    <div><label for="city">City</label><input name="county[]" value="city" type="checkbox" class="noBorderIE" onClick="checkAll(document.frmEventExport.townC)" /></div> 
  </div>
    </div>
<div class="town-select"> 
  <div id="Franklin-county">
    <label for="avon">Avon</label><input name="townF" value="avon" type="checkbox" class="noBorderIE" /><br/>
    <label for="CV">Carrabassett Valley</label><input name="townF" value="carrabassett valley" type="checkbox" class="noBorderIE" /><br/>
    <label for="carthage">Carthage</label><input name="townF" value="carthage" type="checkbox" class="noBorderIE" /><br/>
    <label for="chesterville">Chesterville</label><input name="townF" value="chesterville" type="checkbox" class="noBorderIE" /><br/>
    <label for="CP">Coplin Plantation</label><input name="townF" value="coplin plantation" type="checkbox" class="noBorderIE" /><br/>
    <label for="DP">Dallas Plantation</label><input name="townF" value="dallas plantation" type="checkbox" class="noBorderIE" /><br/>
    <label for="eustis">Eustis</label><input name="townF" value="eustis" type="checkbox" class="noBorderIE" /><br/>

    <label for="farmington">Farmington</label><input name="townF" value="farmington" type="checkbox" class="noBorderIE" /><br/>
    <label for="fayette">Fayette</label><input name="townF" value="fayette" type="checkbox" class="noBorderIE" /><br/>
    <label for="FT">Freeman township</label><input name="townF" value="freeman township" type="checkbox" class="noBorderIE" /><br/>
    <label for="industry">Industry</label><input name="townF" value="industry" type="checkbox" class="noBorderIE" /><br/>
    <label for="jay">Jay</label><input name="townF" value="jay" type="checkbox" class="noBorderIE" /><br/>
    <label for="kingfield">Kingfield</label><input name="townF" value="kingfield" type="checkbox" class="noBorderIE" /><br/>
    <label for="livermore">Livermore</label><input name="townF" value="livermore" type="checkbox" class="noBorderIE" /><br/>
    <label for="LF">Livermore Falls</label><input name="townF" value="livermore falls" type="checkbox" class="noBorderIE" /><br/>

    <label for="MT">Madrid township</label><input name="townF" value="madrid township" type="checkbox" class="noBorderIE" /><br/>
    <label for="MV">Mount Vernon</label><input name="townF" value="mount vernon" type="checkbox" class="noBorderIE" /><br/>
    <label for="NS">New Sharon</label><input name="townF" value="new sharon" type="checkbox" class="noBorderIE" /><br/>
    <label for="NV">New Vineyard</label><input name="townF" value="new vineyard" type="checkbox" class="noBorderIE" /><br/>
    <label for="PT">Perkins township</label><input name="townF" value="perkins township" type="checkbox" class="noBorderIE" /><br/>
    <label for="phillips">Phillips</label><input name="townF" value="phillips" type="checkbox" class="noBorderIE" /><br/>
    <label for="rangeley">Rangeley</label><input name="townF" value="rangeley" type="checkbox" class="noBorderIE" /><br/>
    <label for="RP">Rangeley Plantation</label><input name="townF" value="rangeley plantation" type="checkbox" class="noBorderIE" /><br/>

    <label for="readfield">Readfield</label><input name="townF" value="readfield" type="checkbox" class="noBorderIE" /><br/>
    <label for="SRP">Sandy River Plantation</label><input name="townF" value="sandy river plantation" type="checkbox" class="noBorderIE" /><br/>
    <label for="strong">Strong</label><input name="townF" value="strong" type="checkbox" class="noBorderIE" /><br/>
    <label for="temple">Temple</label><input name="townF" value="temple" type="checkbox" class="noBorderIE" /><br/>
    <label for="vienna">Vienna</label><input name="townF" value="vienna" type="checkbox" class="noBorderIE" /><br/>
    <label for="weld">Weld</label><input name="townF" value="weld" type="checkbox" class="noBorderIE" /><br/>
    <label for="wilton">Wilton</label><input name="townF" value="wilton" type="checkbox" class="noBorderIE" /><br/>

  </div>

Does anyone know a way around this?? ..sorry for the length, btw

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use the brackets in Javascript as long as you put it in a string. I tested this out below with your code and it looks like it should work how you need it.

    JavaScript Code:

    <script type="text/javascript">
function checkAll(parent, field)
{
    var children = document.getElementsByName(field);
    var newValue = parent.checked;
    for (i = 0; i < children.length; i++){
        children[i].checked = newValue;
    }
}
</script>

    HTML Content Snippet:

    <div class ="county-select">
  <div><label for="franklin">Franklin County</label><input name="county[]" value="franklin" type="checkbox" class="noBorderIE" onChange="checkAll(this, 'townF[]')" /></div>
  <div><label for="oxford">Oxford Hills</label><input name="county[]" value="oxford" type="checkbox" class="noBorderIE" onChange="checkAll(this, 'townO[]')" />  </div>
  <div><label for="river-valley">River Valley</label><input name="county[]" value="river-valley" type="checkbox" class="noBorderIE" onChange="checkAll(this, 'townR[]')" /></div>
  <div><label for="city">City</label><input name="county[]" value="city" type="checkbox" class="noBorderIE" onChange="checkAll(this, 'townC[]')" /></div> 
</div>
<div class="town-select">
    <div id="Franklin-county">
    <label for="avon">Avon</label><input name="townF[]" value="avon" type="checkbox" class="noBorderIE" /><br/>
    <label for="CV">Carrabassett Valley</label><input name="townF[]" value="carrabassett valley" type="checkbox" class="noBorderIE" /><br/>
    <label for="carthage">Carthage</label><input name="townF[]" value="carthage" type="checkbox" class="noBorderIE" /><br/>
    <label for="chesterville">Chesterville</label><input name="townF[]" value="chesterville" type="checkbox" class="noBorderIE" /><br/>
    <label for="CP">Coplin Plantation</label><input name="townF[]" value="coplin plantation" type="checkbox" class="noBorderIE" /><br/>
    <label for="DP">Dallas Plantation</label><input name="townF[]" value="dallas plantation" type="checkbox" class="noBorderIE" /><br/>
    <label for="eustis">Eustis</label><input name="townF[]" value="eustis" type="checkbox" class="noBorderIE" /><br/>
  </div>
</div>
    • 0