Question

我有这两个HTML DOM示例，我想知道，如果我开始遍历节点，我如何导航到每个复选框？

DOM示例一：

<div class="box1 margin">
    <h3>Some Checkboxes</h3>
       <input type="checkbox">
       Nr. 1
       <br>
       <input type="checkbox">
       Nr. 2
       <br>
       <input type="checkbox">          
</div>

DOM示例二：

<div>
   <h3>Some Checkboxes </h3>
     <div class="box1 margin">       
         <input type="checkbox">
         Nr. 1
         <br>
         <input type="checkbox">
         Nr. 2
         <br>
         <input type="checkbox">          
     </div>
     <div class="box1 margin">
        <input type="checkbox">
        Nr. 3
        <br>
        <input type="checkbox">
        Nr. 4
        <br>
        <input type="checkbox">          
     </div>
</div>

导航到每个复选框我的意思是选择这个元素，我想选中复选框！

Answer 1

您可以使用 jquery

的每个（）函数

以下代码可以帮助您..

$(document).ready(function(){ 
  $('.box1').children('input[type="checkbox"]').each(function(){
    console.log($(this));
  });
});

Answer 2

您可以使用课程.box1定位div，然后使用descendant selector以及element和attribute equals selector来查找复选框。使用.each()迭代每个

$('.box1 input[type="checkbox"]').each(function(){
    //this refers to the checkbox
    console.log(this)
})

演示：Fiddle

要选中此复选框，请将checked属性设置为true，如

$('.box1 input[type="checkbox"]').prop('checked', true)

演示：Fiddle

Answer 3

您可以直接访问$('input[type="checkbox"]').each()

$('input[type="checkbox"]').each(function(){
   console.log(this.checked);
})

Answer 4

如果要遍历每个.box1.margin容器的每个复选框，只需使用：

$('div.box1.margin').find('input[type="checkbox"]').each(function() {
    console.log(this.checked);
    ...
});

或者：

$('div.box1.margin input[type="checkbox"]').each(function() {
    console.log(this.checked);
    ...
});

或者，如果您想遍历页面上的每个复选框，请使用：

$('input[type="checkbox"]').each(function() {
    console.log(this.checked);
    ...
});

Answer 5

使用jQuery each()方法，它遍历属于jQuery对象的DOM元素。

$(document).ready(function(){ 
   $('div.box1 input[type="checkbox"]').each(function(){
      console.log($(this).prop("checked")); 
   });
});

FIDDLE DEMO

文档：http://api.jquery.com/each/

如何使用JQuery选择器在HTML Dom中选择特定的子节点？

5 个答案: