当我单击一个 div 然后它隐藏其他 div 时我想做

Question

This code is working till div8 but doesn't work after div8 why is this happening please help me out and one more thing plz also explain it if you correct this code and this problem coming because this method doesn't work for more div sorry I know this is silly question. Thanks in advance

  <div style="flex: 1">
        <label class="ac_trigger" for="ac1">Sweets</label>
        <input type="checkbox" class="ac_hide"  onclick="showHide(this,'div1')" id="ac1" name="x1">
      </div>
      <div class="ac_container" id="div1">
        {% for a,b in sweets.items %}
        <table class="foods">
          <tr>
            <th id="{{b}}">{{b}}</th><td><input type="number" name="{{a}}" value="0" id="{{a}}"></td>
          </tr>
        </table>
        {% endfor %}      
      </div>

..................so on to below one.............

      <div style="flex: 1">
        <label class="ac_trigger" for="ac35">Vegitables</label>
        <input type="checkbox" class="ac_hide"  onclick="showHide(this,'div35')" id="ac35" name="x1">
      </div>
      <div class="ac_container" id="div35">
        {% for a,b in veg.items %}
        <table class="foods">
          <tr>
            <th id="{{b}}">{{b}}</th><td><input type="number" name="{{a}}" value="0" id="{{a}}"></td>
          </tr>
        </table>
        {% endfor %}      
      </div>
     </div> 


    </div>
    <div style="text-align: center;">
      <button>Submit</button>
    </div>
  </form>
  <script type="text/javascript">
  function showHide(tagData, divId){
    let allInputs = ['ac1','ac2','ac3','ac4','ac5','ac6','ac7','ac8','ac9','ac10','ac11','ac12','ac13','ac14','ac15','ac16','ac17','ac18','ac19','ac20','ac21','ac22','ac23','ac24','ac25','ac26','ac27','ac28','ac29','ac30','ac31','ac32','ac33','ac34','ac35'];
   let divToChange = document.getElementById(divId);
   divToChange.style.display = tagData.checked ? "block" : "none";
   if(tagData.checked){
   for(let i = 0 ; i = allInputs.length ; i++){
     if(tagData.id !== allInputs[i]) {
       let divToHideId = 'div'+allInputs[i].substr(allInputs[i].length - 1)
       document.getElementById(divToHideId).style.display = 'none'
       document.getElementById(allInputs[i]).checked = false
     }
   }
   }
   
  };
  </script>

Answer 1

It seems like you are missing something there.

<script type="text/javascript">
  function showHide(tagData, divId){
    let allInputs = ['ac1','ac2','ac3','ac4','ac5','ac6','ac7','ac8','ac9','ac10','ac11','ac12','ac13','ac14','ac15','ac16','ac17','ac18','ac19','ac20','ac21','ac22','ac23','ac24','ac25','ac26','ac27','ac28','ac29','ac30','ac31','ac32','ac33','ac34','ac35'];
    let divToChange = document.getElementById(divId);
    divToChange.style.display = tagData.checked ? "block" : "none";
    if(tagData.checked){

      //TRY TO USE for(let i = 0;i<=allInputs.length;i++)

      for(let i = 0 ; i = allInputs.length ; i++){
        if(tagData.id !== allInputs[i]) {
          let divToHideId = 'div'+allInputs[i].substr(allInputs[i].length - 1)
          document.getElementById(divToHideId).style.display = 'none'
          document.getElementById(allInputs[i]).checked = false
        }
      }
    }
        
  };

</script>

Answer 2

function which we required for this question i am very happy right now.....best regards for others

function showHide(evt, divId) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("ac_container");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("ac_hide");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(divId).style.display = "block";
  evt.currentTarget.className += " active";
}