文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使我的功能只适用于一个部分

问如何使我的功能只适用于一个部分
EN

Stack Overflow用户
提问于 2022-11-22 09:11:45
回答 3查看 47关注 0票数 -2

​

​

你好，当我点击select all时，我是选中框，现在它正在选择页面上的所有框，但我必须使它具有特定的节，意思是当我单击“选择所有”的A节。它应该选择所有的A节的框，而不是B或C节，如何使我的选择节具体。请检查图像以更好地理解

css

代码语言：javascript
复制
        .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

代码语言：javascript
复制
 <div class="card" style="background:#ff000014; padding:10px;">
        <div class="card-header " id="Div1">
            <h3>Section A</h3>
            <h5 class="mb-0 ">
                <a class="btn-link " data-toggle="collapse" data-target="#cp2" aria-expanded="true" aria-controls="collapsecroptwo">Select All
                                                                    <img src="select_all.png" class="check-all " onclick="Toggle()" />
                </a>
            </h5>
        </div>


        <div id="Div2" class="collapse show" aria-labelledby="headingcroptwo" data-parent="#accordion" style="">
            <div class="card-body">

                <div id="Div3" class="category-list list-style-none">
                    <ul>
                        <li>
                            <div class="toggle-check-group">

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

                        </li>

                         <li>
                            <div class="toggle-check-group">

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

                        </li>

                         <li>
                            <div class="toggle-check-group">

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

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

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


        <div id="Div5" class="collapse show" aria-labelledby="headingcroptwo" data-parent="#accordion" style="">
            <div class="card-body">

                <div id="Div6" class="category-list list-style-none">
                    <ul>
                        <li>
                            <div class="toggle-check-group">

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

                        </li>

                         <li>
                            <div class="toggle-check-group">

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

                        </li>

                         <li>
                            <div class="toggle-check-group">

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

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


        <div id="Div8" class="collapse show" aria-labelledby="headingcroptwo" data-parent="#accordion" style="">
            <div class="card-body">

                <div id="Div9" class="category-list list-style-none">
                    <ul>
                        <li>
                            <div class="toggle-check-group">

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

                        </li>

                         <li>
                            <div class="toggle-check-group">

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

                        </li>

                         <li>
                            <div class="toggle-check-group">

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

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

JS

代码语言：javascript
复制
 <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>
javascript
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-11-22 11:06:23

不是一个完美的解决方案

代码语言：javascript
复制
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;
  }
}

例如，代码沙箱

票数 0
EN

Stack Overflow用户

发布于 2022-11-22 09:36:15

(建议:您需要了解更多关于JS的知识)

​

代码语言：javascript
复制
//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;
          }
      }
代码语言：javascript
复制
 .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;
}
代码语言：javascript
复制
<!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 class="card" style="background:#ff000014; padding:10px;">
         <div class="card-header " id="Div1">
            <h3>Section A</h3>
            <h5 class="mb-0 ">
               <a class="btn-link " data-toggle="collapse" data-target="#cp2" aria-expanded="true" aria-controls="collapsecroptwo">Select All
               <button class="check-all " onclick="Toggle_1()" />
               </a>
            </h5>
         </div>
         <div id="Div2" class="collapse show" aria-labelledby="headingcroptwo" data-parent="#accordion" style="">
            <div class="card-body">
               <div id="Div3" class="category-list list-style-none">
                  <ul>
                     <li>
                        <div class="toggle-check-group">
                           <label class="switch">
                           <input type="checkbox" name="sectionA" title="3" class="myinput" onclick="CheckUnCheckAll()"><span class="slider" name="pname" title="PNAME">Option-1</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionA" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-2</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionA" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-3</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionA" title="3" class="myinput" onclick="CheckUnCheckAll(); "><span class="slider" name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                     <li>
                        <div class="toggle-check-group">
                           <label class="switch">
                           <input type="checkbox" name="sectionA" title="3" class="myinput" onclick="CheckUnCheckAll()"><span class="slider" name="pname" title="PNAME">Option-1</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionA" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-2</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionA" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-3</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionA" title="3" class="myinput" onclick="CheckUnCheckAll(); "><span class="slider" name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                     <li>
                        <div class="toggle-check-group">
                           <label class="switch">
                           <input type="checkbox" name="sectionA" title="3" class="myinput" onclick="CheckUnCheckAll()"><span class="slider" name="pname" title="PNAME">Option-1</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionA" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-2</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionA" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-3</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionA" title="3" class="myinput" onclick="CheckUnCheckAll(); "><span class="slider" name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
      <br />
      <br />
      <div class="card" style="background:#f8f6ef; padding:10px;">
         <div class="card-header " id="Div4">
            <h3>Section B</h3>
            <h5 class="mb-0 ">
               <a class="btn-link " data-toggle="collapse" data-target="#cp2" aria-expanded="true" aria-controls="collapsecroptwo">Select All
               <button class="check-all " onclick="Toggle_2()" />
               </a>
            </h5>
         </div>
         <div id="Div5" class="collapse show" aria-labelledby="headingcroptwo" data-parent="#accordion" style="">
            <div class="card-body">
               <div id="Div6" class="category-list list-style-none">
                  <ul>
                     <li>
                        <div class="toggle-check-group">
                           <label class="switch">
                           <input type="checkbox" name="sectionB" title="3" class="myinput" onclick="CheckUnCheckAll()"><span class="slider" name="pname" title="PNAME">Option-1</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionB" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-2</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionB" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-3</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionB" title="3" class="myinput" onclick="CheckUnCheckAll(); "><span class="slider" name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                     <li>
                        <div class="toggle-check-group">
                           <label class="switch">
                           <input type="checkbox" name="sectionB" title="3" class="myinput" onclick="CheckUnCheckAll()"><span class="slider" name="pname" title="PNAME">Option-1</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionB" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-2</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionB" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-3</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionB" title="3" class="myinput" onclick="CheckUnCheckAll(); "><span class="slider" name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                     <li>
                        <div class="toggle-check-group">
                           <label class="switch">
                           <input type="checkbox" name="sectionB" title="3" class="myinput" onclick="CheckUnCheckAll()"><span class="slider" name="pname" title="PNAME">Option-1</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionB" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-2</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionB" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-3</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionB" title="3" class="myinput" onclick="CheckUnCheckAll(); "><span class="slider" name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
      <br />
      <br />
      <div class="card" style="background:#ebebf1; padding:10px;">
         <div class="card-header " id="Div7">
            <h3>Section B</h3>
            <h5 class="mb-0 ">
               <a class="btn-link " data-toggle="collapse" data-target="#cp2" aria-expanded="true" aria-controls="collapsecroptwo">Select All
               <button class="check-all " onclick="Toggle_3()" />
               </a>
            </h5>
         </div>
         <div id="Div8" class="collapse show" aria-labelledby="headingcroptwo" data-parent="#accordion" style="">
            <div class="card-body">
               <div id="Div9" class="category-list list-style-none">
                  <ul>
                     <li>
                        <div class="toggle-check-group">
                           <label class="switch">
                           <input type="checkbox" name="sectionC" title="3" class="myinput" onclick="CheckUnCheckAll()"><span class="slider" name="pname" title="PNAME">Option-1</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionC" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-2</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionC" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-3</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionC" title="3" class="myinput" onclick="CheckUnCheckAll(); "><span class="slider" name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                     <li>
                        <div class="toggle-check-group">
                           <label class="switch">
                           <input type="checkbox" name="sectionC" title="3" class="myinput" onclick="CheckUnCheckAll()"><span class="slider" name="pname" title="PNAME">Option-1</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionC" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-2</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionC" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-3</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionC" title="3" class="myinput" onclick="CheckUnCheckAll(); "><span class="slider" name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                     <li>
                        <div class="toggle-check-group">
                           <label class="switch">
                           <input type="checkbox" name="sectionC" title="3" class="myinput" onclick="CheckUnCheckAll()"><span class="slider" name="pname" title="PNAME">Option-1</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionC" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-2</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionC" title="3" class="myinput" onclick="CheckUnCheckAll();"><span class="slider" name="pname" title="PNAME">Option-3</span></label>
                           <label class="switch">
                           <input type="checkbox" name="sectionC" title="3" class="myinput" onclick="CheckUnCheckAll(); "><span class="slider" name="pname" title="PNAME">Option-4</span></label>
                        </div>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
      <script src="src/script.js"></script>
   </body>
</html>

​

票数 0
EN

Stack Overflow用户

发布于 2022-11-22 09:41:24

在JS中，您选择了所有的输入，所以这是正常的。由于您已经拥有了不同div的id，所以可以传入Toggle函数，您单击的div的id，然后选择该id的descedants输入

代码语言：javascript
复制
<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>

除此之外，您还需要将事件侦听器添加到将调用Toggle(e.target.id)的按钮中

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/74530059

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档