获取选中的复选框id

 <div class="container"   style="overflow:scroll;height:480px">
         <div class="form-check">
               <input type="checkbox" checked="checked" class="form-check-input" id="1" name="1" value="N2">
                <label class="form-check-label" for="1">N2</label>
          </div>
        <div class="form-check">
           <input type="checkbox" class="form-check-input" id="3" name="3" value="Air">
          <label class="form-check-label" for="3">Air</label>
     </div>
  </div>

$(function(){
       $("input[name='submit']").on('click',function(){
           debugger
            $(this).closest('.container').each(function () {
                debugger// 在这里获取所有子元素选中复选框的id
                
                 
            });            
       });
   })

该回答引用chatgpt:

img


<!DOCTYPE html>
<html>
<head>
    <title>Checkbox IDs</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container" style="overflow: scroll; height: 480px">
        <div class="form-check">
            <input type="checkbox" checked="checked" class="form-check-input" id="1" name="1" value="N2">
            <label class="form-check-label" for="1">N2</label>
        </div>
        <div class="form-check">
            <input type="checkbox" class="form-check-input" id="3" name="3" value="Air">
            <label class="form-check-label" for="3">Air</label>
        </div>
    </div>

    <button type="button" name="submit">Submit</button>

    <script>
        $(function () {
            $("button[name='submit']").on('click', function () {
                debugger;
                $(this).prev('.container').find(":checkbox:checked").each(function () {
                    var checkboxId = $(this).attr("id");
                    console.log("Selected checkbox ID: " + checkboxId);
                });
            });
        });
    </script>
</body>
</html>
  • 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/968696
  • 这篇博客你也可以参考下：在其他页面怎样获取到用户登录的信息如id值
  • 除此之外, 这篇博客: 获取触发事件的元素的ID中的 #18楼 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 如果是Angular 7.x，则可以获取本机元素及其ID或属性。

    myClickHandler($event) {
    this.selectedElement = <Element>$event.target;
    console.log(this.selectedElement.id)
    this.selectedElement.classList.remove('some-class');
}

    的HTML：

    <div class="list-item" (click)="myClickHandler($event)">...</div>
  • 您还可以看一下 黄菊华老师的微信小程序样式开发入门课程中的 ID选择器小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    要实现获取用户选中的复选框的id，可以通过以下步骤来实现：

    1. 在HTML中给每个复选框设置一个唯一的id，例如：
    <input type="checkbox" id="checkbox1">
<input type="checkbox" id="checkbox2">
<input type="checkbox" id="checkbox3">
    1. 在JavaScript中编写一个函数来获取选中的复选框的id，可以使用querySelectorAll方法来获取所有的复选框元素，然后遍历这些元素，判断是否选中，如果选中则将id保存到一个数组中，最后返回该数组。代码如下：
    function getSelectedCheckboxes() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  var selectedIds = [];
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      selectedIds.push(checkboxes[i].id);
    }
  }
  return selectedIds;
}
    1. 在需要获取选中复选框的时候，调用该函数即可：
    var selectedIds = getSelectedCheckboxes();
console.log(selectedIds);

    这样就可以获取到用户选中的复选框的id了。