Question

<div class="parent">
    <div class="click"></div>
    <div class="subdiv">
        <input value="1">
        <input value="2">
    </div>
</div>

我有以下代码，并点击了onclick div事件。现在我想迭代这个特定父input中的所有div（有很多）。

所以我写了这样的话：

$(this).parent().children('.subdiv input').not(':checked').length

它应输出类似1或2的内容，具体取决于未选中的input个。{但它总是显示0。

为什么会这样？

另外，我如何检查/取消选中它们？

$(this).parent().find('.subdiv input').not(':checked').each(function() {
    // $(this) is undefined, or shows 0
});

Answer 1

首先，您应该将这些输入声明为复选框：

<input type="checkbox" value="1" />

然后，点击.parent元素：

$('.parent').on('click', function() {
    // alert the number of checked checkboxes
    alert($(this).find('input[type="checkbox"]:checked').length);
});

要检查复选框，请使用prop()功能：

$('input[type="checkbox"]').prop('checked', true); // sets input to checked state

为了获得复选框的值：

var value = $('input[type="checkbox"]').val();

<强>样本

＆＃13;

$('.parent').on('click', function() {
  var n = $(this).find('input[type=checkbox]:checked').length;
  alert('There are ' + n + ' checked checkboxes');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parent">
    <div class="click"></div>
    <div class="subdiv">
        <input type="checkbox" value="1">
        <input type="checkbox" value="2" checked>
    </div>
</div>

＆＃13;

Answer 2

ASsuming所有输入都是复选框或任何可以检查的内容使用以下 1＆gt;未检查输入

$(this).parent().find('input:checked').length

1＆gt;未选中输入数

$(this).parent().find('input').not(':checked').length

Answer 3

默认情况下，input为text。 checked属性不适用于文本字段。它应该是复选框或无线电。试试 -

<div class="subdiv">
  <input type="checkbox" value="1">
  <input type="checkbox" value="2">
</div>

Answer 4

输入文字没有选中/未选中的属性。您需要将类型定义为输入元素的复选框：

<input type="checkbox" value="1">
<input type="checkbox" value="2">

您也可以缩小选择器以获取未选中的复选框：

$(this).parent().find('input:not(:checked)').each(function() {
 // $(this) is undefined, or shows 0
});

在父节点中迭代输入的子节点

4 个答案: