Jquery : 指定输入的 id:checkbox 元素

Question

如果是 jquery 代码，我有这个小示例，但我想让它更具体地用于我的 HTML 页面的两个不同输入之一。

  <script>
  // check only one box at time
  $(document).ready(function() {
      $('input:checkbox').click(function() {
          $('input:checkbox').not(this).prop('checked', false);
      });
  });
  </script>

这是两个相关的输入：

<div id="reponses-section" class="form-check">
    <c:forEach items="${question.reponses}" var="reponse">
        <input id="${reponse.id}" name="id-reponse" value="${reponse.id}"
                type="checkbox" class="form-check-input">
        <h5>${reponse.texte}</h5>
    </c:forEach>
</div> 

<div id="theme-btn" class="pull-right">
    <label class="switch">
        <input id="changeThemeBtn" type="checkbox" onclick="getTheme(this);" value="dark">
        <span class="slider round"></span>
    </label>
</div>

是否可以为js代码示例指定一个id，如果可以，使用的语法是什么？

提前谢谢你

Answer 1

jQuery 使用 CSS 选择器语法选择项目，因此 ID 将只是 #yourTargetId。

Answer 2

我强烈建议您使用此方法。您可以随意更改data-id 名称。

$(document).ready(function() {
    $('input[data-id="checkbox1"]').click(function() {
        $('input[data-id="checkbox1"]').prop('checked', false);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<input data-id="checkbox1" id="${reponse.id}" name="id-reponse" value="${reponse.id}" type="checkbox" class="form-check-input">

<input data-id="checkbox2" id="changeThemeBtn" type="checkbox" onclick="getTheme(this);" value="dark">