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

Question

I know usually when multiple classes are needed to select different classes we use , and I searched around too to make sure I didn't remember wrong but somehow if I use , there's no error but it wouldn't detect the second select only detect the first. If I call the classes separately then the code would work though. Can someone let me know what I have done wrong with the jQuery?

this works.

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

but if I do it this way, it wouldn't work

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

I have three checkbox. Only one can be checked before a form submits. When form submits it'll check which checkbox is checked. If either one of the classes from the above code is checked then the form will check for a certain inputs if the 3rd checkbox is checked then it'll check for a different validation.

Just that since those two check boxes have the same inputs to check I figure why not combine them if possible.

Answer 1

Per the jQuery docs:

.prop( propertyName )

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

And also:

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

With multiple selectors, it only checks the first selected element's property. Consider the following snippet:

$("#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!

As you can see, it will be true when the first element is checked or all are and the other isn't, or when they are all checked, but not when the second is checked, and the first isn't.

Answer 2

Copying in my comment from above...

From .prop()

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

Ie, out of the set of all use-remaining and use-briquettes classed elements, it is only checking the checked property of the first one

In order to tell if there are any checked properties from the set of all use-remaining and use-briquettes classed elements, you can use .is()

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

Answer 3

When using multiple selectors in a jQuery collection and checking a property it will only check the first element.

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 4

As mentioned before, .prop function returns the property value for the first element in the set of matched elements. Here is one way to achieve desired results:

$("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>

Alternately, you can test this condition:

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