0

I have a group of checkboxes that are dynamically generated by php and I am trying to validate at least one is checked and use html5 for validation. My PHP fall back validation is working but my Javascript part is not. I only want to use Javascript for my solution but I am not that great at it.

I am using code from two examples I found on SO. How can I check a checkbox when another checkbox is checked? [JavaScript] Using the HTML5 "required" attribute for a group of checkboxes?.

I was able to get it working with using one set of check boxes as an example but once I tried to loop over the full array of generated checkboxes it failed.

This worked somewhat but only worked if I checked the first checkbox Equipment.

    function onToggle(){
   if (document.querySelector('#skillset').checked) {
      // if checked
      console.log('checked');
      document.getElementById("radio-for-checkboxes").checked = true
      } else {
      // if unchecked
      console.log('unchecked');
    }

}

    Page HTML 

    <div class="checkboxs-wrapper"> 
    <input id="radio-for-checkboxes" type="radio" name="skillset[]" value="2" required/>
    <!-- BEGIN parentblockid -->
       <p><a  onclick="showLinks(['box2','boxlink1','boxlink3','boxlink4','boxlink5','boxlink6','boxlink7','boxlin        k8','boxlink9','boxlink10']);         hideLinks(['boxlink2','box1','box3','box4','box5','box6','box7','box8','box9','box10'])"         class="boxlink" id="boxlink2">{parentblockid.SBB_TITLE}</a></p>
    <!-- END parentblockid -->
    <div id="box2" style="display:none;">
    <!-- BEGIN skillsetsa -->
    <input type="checkbox" name="skillset[]" id="skillset" value="{skillsetsa.SBB_VALUE}"         {skillsetsa.SBB_VALUECHECKED} data-role="none" required onclick="onToggle()">                                        {skillsetsa.SBB_TITLE}</p>
    <!-- END skillsetsa -->
    </div>
    </div>

     Generated HTML 
     <div class="checkboxs-wrapper">    
     <input id="radio-for-checkboxes" type="radio" name="skillset[]" value="2" required/>
     <div style="display:none;">
     <input type="checkbox"  name="skillset[]" value="Equiptment" >Equiptment&nbsp;&nbsp;<br />
     <input type="checkbox"  name="skillset[]" value="Housing" >Housing&nbsp;&nbsp;<br />
     <input type="checkbox"  name="skillset[]" value="Other" >Other&nbsp;&nbsp;<br />
     </div>

I then tried to loop through the checkbox and find at least one regardless if its the first box or not but it's not working. Any help on this will be greatly appreciative. Thanks.

   function onToggle(){
   var checkboxs=document.getElementsByName("skillset");
   for(var i=0,l=checkboxs.length;i<l;i++){
   if (document.querySelector('#skillset').checked) {
      // if checked
      console.log('checked');
      document.getElementById("radio-for-checkboxes").checked = true
     } 
     }else {
      // if unchecked
      console.log('unchecked');
    }
  }
user2974907
  • 67
  • 1
  • 9
  • I'm a bit confused. Are you trying to validate that one is checked or toggle checked properties on checkboxes? `document.getElementById("radio-for-checkboxes").checked = true` is an assignment, not a validation. The loop doesn't make much sense because it checks the same condition (`if (document.querySelector('#skillset').checked)`) and takes the same action `document.getElementById("radio-for-checkboxes").checked = true` for every item in the array rather than operating on a given `checkboxs[i]`. – ggorlen Jan 11 '21 at 01:08
  • I added an [answer](https://stackoverflow.com/a/65660416/6243352) to one of the canonical threads you pointed out--maybe it's what you want. – ggorlen Jan 11 '21 at 01:48
  • I am going for both in a sense. I am using the hidden radio dial hack to trigger the Html5 required attribute for the 30 dynamic checkboxes in the form. If a user does not check ONE of the 30 dynamic checkboxes then a red outline shows up around the checkbox menu and a html5 generated message appears when form is submitted. User has to select one of the boxes, which toggles the required radio dial to be populated and satisfies the required attribute, disables the warning and allows the form to submit. – user2974907 Jan 11 '21 at 06:24

0 Answers0