为什么我不能使用带有多重选择器的 prop() 翻转支票属性？

Question

我知道通常什么时候需要多个类来 select 不同的类我们使用 , 我也四处搜索以确保我没有记错但不知何故，如果我使用 , 没有错误，但它不会检测到第二个 select 只检测到第一个。如果我单独调用类那么代码就可以工作了。谁能告诉我我在 jQuery 上做错了什么？

这有效。

if(($('.use-remaining').prop("checked")) || (($('.use-briquettes').prop("checked")))){}

但如果我这样做，它不会工作

if(($('.use-remaining, .use-briquettes').prop("checked"))){}

我有三个复选框。在表单提交之前只能检查一个。当表单提交时，它会检查哪个复选框被选中。如果选中上述代码中的类之一，则表单将检查特定输入，如果选中第三个复选框，则它将检查不同的验证。

只是因为这两个复选框具有相同的检查输入，所以我想如果可能的话为什么不将它们结合起来。

Answer 1

根据 jQuery docs:

.prop( propertyName )

Description: Get the value of a property for the first element in the set of matched elements.

还有：

The .prop() method gets the property value for only the first element in the matched set.

对于多个选择器，它只检查第一个选定元素的属性。考虑以下片段：

$("#test_button").click(function() {
  console.log($("#test, .test_2").prop("checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="test">
<input type="checkbox" class="test_2">
<button id="test_button">
Test
</button>
<br>
Notice that when the first isn't selected but the second is, it still is false!

如您所见，当选中第一个元素或全部选中而另一个未选中时，或者当它们都选中时，它将为真，但不是第二个被选中，第一个没有。

Answer 2

在 jQuery 集合中使用多个选择器并检查属性时，它只会检查第一个元素。

var test1 = $(".test1").prop("checked")
var test2 = $(".test2").prop("checked")
var test3 = $(".test1, .test2").prop("checked")

$('p').text(test1 + " " + " " + test2 + " " + test3)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="test1" type="checkbox" />
<input class="test2" type="checkbox" checked="true" />

<p></p>

Answer 3

正在复制我上面的评论...

来自.prop()

Description: Get the value of a property for the first element in the set of matched elements

即，在所有 use-remaining 和 use-briquettes 分类元素的集合中，它只检查第一个

的已检查属性

为了判断所有 use-remaining 和 use-briquettes 分类元素的集合中是否有任何已检查的属性，您可以使用 .is()

var anyChecked = $('.use-remaining, .use-briquettes').is(function() {
    return this.checked;
});

Answer 4

如前所述，.prop 函数 returns 匹配元素集中第一个元素的属性值。这是实现预期结果的一种方法：

$("form").on("submit", function(e) {
  e.preventDefault();
  if ($(".use-remaining:checked, .use-briquettes:checked").length) {
    console.log(".use-remaining and/or .use-briquettes are checked");
  } else {
    console.log("both .use-remaining and .use-briquettes are not checked");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form>
  <input type="checkbox" name="use-remaining" class="use-remaining">use-remaining<br>
  <input type="checkbox" name="use-briquettes" class="use-briquettes">use-briquettes<br>
  <input type="Submit" value="Click to test">
</form>

或者，您可以测试这个条件：

if ($(".use-remaining, .use-briquettes").is(":checked")) {
}

为什么我不能使用带有多重选择器的 prop() 翻转支票属性？

Why I can't flip the check property using prop() with a multiple selector?

javascript

jquery

class

selector

为什么我不能使用带有多重选择器的 prop() 翻转支票 属性？

Why I can't flip the check property using prop() with a multiple selector?

javascript

jquery

class

selector

为什么我不能使用带有多重选择器的 prop() 翻转支票属性？