Home > Mobile >  How to make my function work for only for one section
How to make my function work for only for one section

Time:11-22

enter image description here

Hello I am select boxes when I click on select all, Right now it's selection all the boxes on the page, But I have to make it section specific, Means when I click on "select all" of A section. It should select all A section's boxes, not of section B or C. How to make my selection section specific. plz check image for better understanding

css

        .box {
            background:red;
            padding:10px;
            width:200px;
            display:none;
        }

        .toggle-check-group {
    margin-top: 10px;
    padding: 0px 0px;
    margin-bottom: 20px;
}

.switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.slider {
    cursor: url('../img/pest_cursor.svg'), move !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    -webkit-transition: .1s;
    transition: .1s;
    text-align: center;
    margin: auto;
    padding: 5px 10px;
    border: 1px solid #707070;
    border-radius: 5px;
    font-size: .8rem;
    margin-right: 10px;
    transition: top .1s;
}

    .slider:hover {
        top: -5px;
    }


input:checked   .slider {
    color: #188a80;
    background-color: #daf1ef;
    border: 1px solid #188a80;
}

input:focus   .slider {
    box-shadow: 0 0 1px #2196F3;
}

.slider::selection {
    color: none;
    background: none;
}
/* For Mozilla Firefox */
.slider::-moz-selection {
    color: none;
    background: none;
}

/* For Mozilla Firefox */
.slider::-webkit-selection {
    color: none;
    background: none;
}

html

 <div  style="background:#ff000014; padding:10px;">
        <div  id="Div1">
            <h3>Section A</h3>
            <h5 >
                <a  data-toggle="collapse" data-target="#cp2" aria-expanded="true" aria-controls="collapsecroptwo">Select All
                                                                    <img src="select_all.png"  onclick="Toggle()" />
                </a>
            </h5>
        </div>


        <div id="Div2"  aria-labelledby="headingcroptwo" data-parent="#accordion" style="">
            <div >

                <div id="Div3" >
                    <ul>
                        <li>
                            <div >

                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                            </div>

                        </li>

                         <li>
                            <div >

                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                            </div>

                        </li>

                         <li>
                            <div >

                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                            </div>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

        <br />
        <br />
    <div  style="background:#f8f6ef; padding:10px;">
        <div  id="Div4">
            <h3>Section B</h3>
            <h5 >
                <a  data-toggle="collapse" data-target="#cp2" aria-expanded="true" aria-controls="collapsecroptwo">Select All
                                                                    <img src="select_all.png"  onclick="Toggle()" />
                </a>
            </h5>
        </div>


        <div id="Div5"  aria-labelledby="headingcroptwo" data-parent="#accordion" style="">
            <div >

                <div id="Div6" >
                    <ul>
                        <li>
                            <div >

                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                            </div>

                        </li>

                         <li>
                            <div >

                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                            </div>

                        </li>

                         <li>
                            <div >

                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                            </div>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
        <br />
        <br />
    <div  style="background:#ebebf1; padding:10px;">
        <div  id="Div7">
            <h3>Section B</h3>
            <h5 >
                <a  data-toggle="collapse" data-target="#cp2" aria-expanded="true" aria-controls="collapsecroptwo">Select All
                                                                    <img src="select_all.png"  onclick="Toggle()" />
                </a>
            </h5>
        </div>


        <div id="Div8"  aria-labelledby="headingcroptwo" data-parent="#accordion" style="">
            <div >

                <div id="Div9" >
                    <ul>
                        <li>
                            <div >

                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                            </div>

                        </li>

                         <li>
                            <div >

                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                            </div>

                        </li>

                         <li>
                            <div >

                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                                <label >
                                    <input type="checkbox" name="pestname" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                            </div>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

JS

 <script>
      //get all elements with tag name input
      var checkboxes = document.getElementsByClassName("myinput");

      

      //create toggle function
      function Toggle() {
          //iterate over all checkboxes and mark check = true
          for (i = 0; i < checkboxes.length; i  ) {
              if (checkboxes[i].type === 'checkbox')
                  checkboxes[i].checked = !checkboxes[i].checked;
          }
      }


    </script>

CodePudding user response:

(advice: you need to learn more about JS)

//get all elements with tag name input
      var checkboxes = document.getElementsByClassName("myinput");
      //create toggle function
      function Toggle_1() {
          //iterate over all checkboxes and mark check = true
          for (i = 0; i < checkboxes.length; i  ) {
              if (checkboxes[i].type === 'checkbox' && checkboxes[i].name === 'sectionA')
                  checkboxes[i].checked = !checkboxes[i].checked;
          }
      }
      function Toggle_2() {
          //iterate over all checkboxes and mark check = true
          for (i = 0; i < checkboxes.length; i  ) {
              if (checkboxes[i].type === 'checkbox' && checkboxes[i].name === 'sectionB')
                  checkboxes[i].checked = !checkboxes[i].checked;
          }
      }
      function Toggle_3() {
          //iterate over all checkboxes and mark check = true
          for (i = 0; i < checkboxes.length; i  ) {
              if (checkboxes[i].type === 'checkbox' && checkboxes[i].name === 'sectionC')
                  checkboxes[i].checked = !checkboxes[i].checked;
          }
      }
 .box {
            background:red;
            padding:10px;
            width:200px;
            display:none;
        }

        .toggle-check-group {
    margin-top: 10px;
    padding: 0px 0px;
    margin-bottom: 20px;
}

.switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.slider {
  
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    -webkit-transition: .1s;
    transition: .1s;
    text-align: center;
    margin: auto;
    padding: 5px 10px;
    border: 1px solid #707070;
    border-radius: 5px;
    font-size: .8rem;
    margin-right: 10px;
    transition: top .1s;
}

    .slider:hover {
        top: -5px;
    }


input:checked   .slider {
    color: #188a80;
    background-color: #daf1ef;
    border: 1px solid #188a80;
}

input:focus   .slider {
    box-shadow: 0 0 1px #2196F3;
}

.slider::selection {
    color: none;
    background: none;
}
/* For Mozilla Firefox */
.slider::-moz-selection {
    color: none;
    background: none;
}

/* For Mozilla Firefox */
.slider::-webkit-selection {
    color: none;
    background: none;
}
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="src/style.css">
   </head>
   <body>
      <div  style="background:#ff000014; padding:10px;">
         <div  id="Div1">
            <h3>Section A</h3>
            <h5 >
               <a  data-toggle="collapse" data-target="#cp2" aria-expanded="true" aria-controls="collapsecroptwo">Select All
               <button  onclick="Toggle_1()" />
               </a>
            </h5>
         </div>
         <div id="Div2"  aria-labelledby="headingcroptwo" data-parent="#accordion" style="">
            <div >
               <div id="Div3" >
                  <ul>
                     <li>
                        <div >
                           <label >
                           <input type="checkbox" name="sectionA" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                           <label >
                           <input type="checkbox" name="sectionA" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                           <label >
                           <input type="checkbox" name="sectionA" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                           <label >
                           <input type="checkbox" name="sectionA" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                     <li>
                        <div >
                           <label >
                           <input type="checkbox" name="sectionA" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                           <label >
                           <input type="checkbox" name="sectionA" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                           <label >
                           <input type="checkbox" name="sectionA" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                           <label >
                           <input type="checkbox" name="sectionA" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                     <li>
                        <div >
                           <label >
                           <input type="checkbox" name="sectionA" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                           <label >
                           <input type="checkbox" name="sectionA" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                           <label >
                           <input type="checkbox" name="sectionA" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                           <label >
                           <input type="checkbox" name="sectionA" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
      <br />
      <br />
      <div  style="background:#f8f6ef; padding:10px;">
         <div  id="Div4">
            <h3>Section B</h3>
            <h5 >
               <a  data-toggle="collapse" data-target="#cp2" aria-expanded="true" aria-controls="collapsecroptwo">Select All
               <button  onclick="Toggle_2()" />
               </a>
            </h5>
         </div>
         <div id="Div5"  aria-labelledby="headingcroptwo" data-parent="#accordion" style="">
            <div >
               <div id="Div6" >
                  <ul>
                     <li>
                        <div >
                           <label >
                           <input type="checkbox" name="sectionB" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                           <label >
                           <input type="checkbox" name="sectionB" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                           <label >
                           <input type="checkbox" name="sectionB" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                           <label >
                           <input type="checkbox" name="sectionB" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                     <li>
                        <div >
                           <label >
                           <input type="checkbox" name="sectionB" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                           <label >
                           <input type="checkbox" name="sectionB" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                           <label >
                           <input type="checkbox" name="sectionB" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                           <label >
                           <input type="checkbox" name="sectionB" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                     <li>
                        <div >
                           <label >
                           <input type="checkbox" name="sectionB" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                           <label >
                           <input type="checkbox" name="sectionB" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                           <label >
                           <input type="checkbox" name="sectionB" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                           <label >
                           <input type="checkbox" name="sectionB" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
      <br />
      <br />
      <div  style="background:#ebebf1; padding:10px;">
         <div  id="Div7">
            <h3>Section B</h3>
            <h5 >
               <a  data-toggle="collapse" data-target="#cp2" aria-expanded="true" aria-controls="collapsecroptwo">Select All
               <button  onclick="Toggle_3()" />
               </a>
            </h5>
         </div>
         <div id="Div8"  aria-labelledby="headingcroptwo" data-parent="#accordion" style="">
            <div >
               <div id="Div9" >
                  <ul>
                     <li>
                        <div >
                           <label >
                           <input type="checkbox" name="sectionC" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                           <label >
                           <input type="checkbox" name="sectionC" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                           <label >
                           <input type="checkbox" name="sectionC" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                           <label >
                           <input type="checkbox" name="sectionC" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                     <li>
                        <div >
                           <label >
                           <input type="checkbox" name="sectionC" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                           <label >
                           <input type="checkbox" name="sectionC" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                           <label >
                           <input type="checkbox" name="sectionC" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                           <label >
                           <input type="checkbox" name="sectionC" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                     <li>
                        <div >
                           <label >
                           <input type="checkbox" name="sectionC" title="3"  onclick="CheckUnCheckAll()"><span  name="pname" title="PNAME">Option-1</span></label>
                           <label >
                           <input type="checkbox" name="sectionC" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-2</span></label>
                           <label >
                           <input type="checkbox" name="sectionC" title="3"  onclick="CheckUnCheckAll();"><span  name="pname" title="PNAME">Option-3</span></label>
                           <label >
                           <input type="checkbox" name="sectionC" title="3"  onclick="CheckUnCheckAll(); "><span  name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
      <script src="src/script.js"></script>
   </body>
</html>

CodePudding user response:

In your JS you select all the inputs so that's normal to happen. Since you already have id's for the different Divs you can pass in Toggle function the id of the div you clicked and then select the inputs that are descedants of that id

<script>

  function Toggle(id) {
  let checkboxes = document.querySelectorAll(`#${id} .myinput`);
      for (i = 0; i < checkboxes.length; i  ) {
          if (checkboxes[i].type === 'checkbox')
              checkboxes[i].checked = !checkboxes[i].checked;
      }
  }


</script>

Apart from this you will need to add event listeners to the buttons which will call Toggle(e.target.id)

CodePudding user response:

Not a perfect solution

function Toggle(e) {
  const getClassClicked = e.target.getAttribute("data-class");
  const checkboxes = document.querySelectorAll(
    `.${getClassClicked} ul li input`
  );
  for (let i = 0; i < checkboxes.length; i  ) {
    if (checkboxes[i].type === "checkbox")
      checkboxes[i].checked = !checkboxes[i].checked;
  }
}

Code Sand Box For Example

  • Related