Question

我有这段代码正在选择一组单选按钮。现在，javascript通过按ID获取元素来选择单选按钮。我想看看是否可以用类名而不是ID来做到这一点？在这里的任何帮助将不胜感激。您可以在给出的示例中看到我的代码的行为，我只是更喜欢使用类名代替ID。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="check()">Select All Option 1</button>
<button onclick="uncheck()">Un-Select Option 1</button>

<table class="table table-striped">
      <thead>
        <tr>
          <th scope="col">Count</th>
          <th scope="col">Type 1</th>
          <th scope="col">Type 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">0</th>
          <td>

            <!-- Group of default radios - option 1 -->
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input allOption1" id="option1Id1" name="group1">
            <label class="custom-control-label" for="option1Id1">Option 1</label>
          </div>

          </td>
          <td>

              <!--  Group of default radios - option 2 -->
              <div class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" id="option1Id2" name="group1" >
                <label class="custom-control-label" for="option1Id2">Option 2</label>
              </div>
          </td>
          
        </tr>
        <tr>
          <th scope="row">1</th>
          <td>

              <!-- Group of default radios - option 1 -->
              <div class="custom-control custom-radio">
                <input type="radio" class="custom-control-input allOption1" id="option2Id1" name="group2">
                <label class="custom-control-label" for="option2Id1">Option 1</label>
              </div>

          </td>
          <td>

              <!--  Group of default radios - option 2 -->
              <div class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" id="option2Id2" name="group2" >
                <label class="custom-control-label" for="option2Id2">Option 2</label>
              </div>


          </td>
          
          </tr>
          </tbody>
          </table>

          
          
          
<script>
function check() {
document.getElementById("option1Id1").checked = true; 
document.getElementById("option2Id1").checked = true;
/* document.getElementsByClassName('allOption1').checked = true;  */
}



function uncheck() {
  document.getElementById("option1Id1").checked = false;
  document.getElementById("option2Id1").checked = true; 
}
</script>

Answer 1

您可以使用至少两种方法之一通过类名获取元素。

var elements = document.getElementsByClassName("classname");

或

var elements = document.querySelectorAll(".classname"); // Note the "." as this method uses CSS selectors

然后您可以循环访问这些变量中的任何一个，顺便说一下，它们是NodeList而不是JS Array。

for(var e = 0; e < elements.length; e++) {
  // do something with elements[e]
}

看看MDN上的文档。

按类名称选择按钮的单选按钮组

1 个答案: