时间戳

首页 > 解决方案 > 查找 html 中的所有复选框

javascript - 查找 html 中的所有复选框

问题描述

我正在生成一个动态表单。添加复选框后，将生成以下 HTML：

<div class='selected_checkboxes'>
  <div class="clearfix"></div>
  <div id="931022941" class="checkboxes_line">
    <div class="col-md-3">
      <label>Checkbox Name: </label><input type="text" data-id="931022941" class="form-control checkbox_label" name="checkbox_name"><br>
    </div>
    <div class="col-md-3">
      <label>CheckBox Value</label> <input type="text" data-id="931022941" class="form-control checkbox_value " name="checkbox_value">
    </div>
    <div class="col-md-3">
      <a class="remove_checkbox btn btn-danger" value="Remove" data-id="931022941">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="343" name="34[]" data-id="931022941" class="checkbox_item"
        value="343"> <label class="ceheckbox_text" data-id="931022941"></label>
    </div>
  </div>
  <div calss="col-md-1">
    <br>
  </div>
  <div class="clearfix"></div>
  <div id="867429714" class="checkboxes_line">
    <div class="col-md-3">
      <label>Checkbox Name: </label><input type="text" data-id="867429714" class="form-control checkbox_label" name="checkbox_name"><br>
    </div>
    <div class="col-md-3">
      <label>CheckBox Value</label> <input type="text" data-id="867429714" class="form-control checkbox_value " name="checkbox_value">
    </div>
    <div class="col-md-3">
      <a class="remove_checkbox btn btn-danger" value="Remove" data-id="867429714">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="3434" name="34[]" data-id="867429714" class="checkbox_item"
        value="3434"> <label class="ceheckbox_text" data-id="867429714"></label>
    </div>
  </div>
  <div calss="col-md-1">
    <br>
  </div>
</div>

我需要获取 HTML 中的所有复选框并使用它们的data属性，我尝试使用它：

var checkboxes = $('.selected_checkboxes :checkbox');

然后我在复选框上循环，但这不起作用。

有人可以建议帮我解决吗

标签： javascripthtmljquery

解决方案

没有（POJS）或使用 JQuery：

// POJS
document.querySelectorAll(".selected_checkboxes .checkbox_item")
  .forEach( cb => console.log(`data-id: ${cb.dataset.id}`) );
  
// JQuery
$(".selected_checkboxes :checkbox")
  .each( (i, cb) => console.log(`data-id: ${cb.dataset.id}`) )
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='selected_checkboxes'>
   <div class="clearfix"></div>
   <div id="931022941" class="checkboxes_line">
      <div class="col-md-3">
         <label>Checkbox Name: </label><input type="text" data-id="931022941" class="form-control checkbox_label" name="checkbox_name"><br>
      </div>
      <div class="col-md-3">
         <label>CheckBox Value</label> <input type="text" data-id="931022941" class="form-control checkbox_value " name="checkbox_value">
      </div>
      <div class="col-md-3">
         <a class="remove_checkbox btn btn-danger" value="Remove" data-id="931022941">Remove</a>                     <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="343" name="34[]" data-id="931022941" class="checkbox_item" value="343"> <label class="ceheckbox_text" data-id="931022941"></label>
      </div>
   </div>
   <div calss="col-md-1">
      <br>
   </div>
   <div class="clearfix"></div>
   <div id="867429714" class="checkboxes_line">
      <div class="col-md-3">
         <label>Checkbox Name: </label><input type="text" data-id="867429714" class="form-control checkbox_label" name="checkbox_name"><br>
      </div>
      <div class="col-md-3">
         <label>CheckBox Value</label> <input type="text" data-id="867429714" class="form-control checkbox_value " name="checkbox_value">
      </div>
      <div class="col-md-3">
         <a class="remove_checkbox btn btn-danger" value="Remove" data-id="867429714">Remove</a>                     <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="3434" name="34[]" data-id="867429714" class="checkbox_item" value="3434"> <label class="ceheckbox_text" data-id="867429714"></label>
      </div>
   </div>
   <div calss="col-md-1">
      <br>
   </div>
</div>

推荐阅读