如何获取fieldset元素内的Checkbox的所有ID?

时间:2016-05-05 07:24:10

标签: javascript jquery

如何使用CheckBoxes获取Fieldset元素中jQuery元素的所有ID?

以下是我到目前为止所尝试的内容..

jQuery的:

$(document).on("click", "a[id$='btnShowRates']", function (e) {
  //for selecting checkboxes when page loads first time
  var everyChildcb = document.querySelectorAll('[id$=listRateCats] input[type=checkbox]');

  //I also tried like below but not working

  //var everyChildcb = document.querySelectorAll("#listRates");
});

HTML代码: HTML代码中包含一个fieldset元素,其中有多个CheckBoxes可以在下面的HTML代码段中看到..

<fieldset data-role="controlgroup" id="listRates" data-icon="false" runat="server">
  <div style='position:relative;'>
    <input type='checkbox' id='1' data-display-name='Rack/General' />
    <label for='1'>Rack/General</label>
    <img id='img_1' class='checkboxFixIconLeft' />
  </div>
  <div style='position:relative;'>
    <input type='checkbox' id='4' data-display-name='Government' />
    <label for='4'>Government</label>
    <img id='img_4' class='checkboxFixIconLeft' />
  </div>
  <div style='position:relative;'>
    <input type='checkbox' id='6' data-display-name='Package' />
    <label for='6'>Package</label>
    <img id='img_6' class='checkboxFixIconLeft' />
  </div>
  <div style='position:relative;'>
    <input type='checkbox' id='3' data-display-name='Family' />
    <label for='3'>Family</label>
    <img id='img_3' class='checkboxFixIconLeft' />
  </div>
</fieldset>

感谢任何帮助和建议,谢谢!

2 个答案:

答案 0 :(得分:3)

您可以使用map()函数将id作为数组获取。

var ids = $("fieldset :checkbox").map(function() {
  return this.id;
}).get();
console.log(ids)

或者您可以循环选中复选框以获取ID。对于循环,您可以使用.each()。在循环上下文中,您可以使用this.id来获取当前循环复选框的ID

$("fieldset :checkbox").each(function() {
  console.log(this.id);
});

Fiddle

答案 1 :(得分:0)

&#13;
&#13;
$('#listRates').find('input:checkbox').each(function(){
alert($(this).attr('id'))//get each checkbox id

})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset data-role="controlgroup" id="listRates" data-icon="false" runat="server">

  <div style='position:relative;'>
    <input type='checkbox' id='1' data-display-name='Rack/General' />
    <label for='1'>Rack/General</label>
    <img id='img_1' class='checkboxFixIconLeft' />
  </div>
  <div style='position:relative;'>
    <input type='checkbox' id='4' data-display-name='Government' />
    <label for='4'>Government</label>
    <img id='img_4' class='checkboxFixIconLeft' />
  </div>
  <div style='position:relative;'>
    <input type='checkbox' id='6' data-display-name='Package' />
    <label for='6'>Package</label>
    <img id='img_6' class='checkboxFixIconLeft' />
  </div>
  <div style='position:relative;'>
    <input type='checkbox' id='3' data-display-name='Family' />
    <label for='3'>Family</label>
    <img id='img_3' class='checkboxFixIconLeft' />
  </div>

</fieldset>
► Run code snippet
&#13;
&#13;
&#13;

使用.each()