How to determine whether the checkbox in JS is selected

In the process of learning, I touch html Content of separate development , Check box checkbox It is determined that the selection is for ajax It is very important to transmit data , So forward this article for retention , For future reference .

To determine whether the check box is selected, you can use ：

$("#test1").prop("checked") and $("#test1").is(":checked")1

1、checkbox Medium checked attribute

1.1 If for input label , Do not set its checked Attribute words , The default is that the check box is not selected ;

<input type="checkbox" name="test" id="test"/>  // Not selected 1

1.2 And if you set it checked Attribute words , I am js In the middle of the test ;

1） take checked Property is set to checked=true perhaps checked=”true” perhaps checked=”false” when , The system will think that the check box is selected .

<input type="checkbox" name="test" id="test1"/ checked=true>  // Choose 
<input type="checkbox" name="test" id="test2"/ checked="true">  // Choose 
<input type="checkbox" name="test" id="test3"/ checked="false">  // Choose 
<input type="checkbox" name="test" id="test4"/ checked >  // Choose 1234

2） During the test , take checked Property is set to checked=false when , The system still thinks that the check box is not selected ;

<input type="checkbox" name="test" id="test5"/ checked=false>  // Not selected 1

*** however , When we will checked Property is set to checked=false when , Although at the time of display , The check box is not selected when it is rendered , however , If we use the following code ：

$("#test").prop("checked") as well as $("#test").is(":checked")1

The value obtained is still true（ Choose ）.

2、 Use （.val()） Value —– It can't be used to judge whether the check box is selected

<input type="checkbox" name="test" id="test"/> // Not selected 
<input type="checkbox" name="test" id="test1"/ checked=true>  // Choose 12

We use console.log() take checked Print out the value of , The result is as follows ：

Whether it is selected or not , The values taken are on, So we have to decide checkbox Selected state of , Out of commission .val() Value

console.log($("#test").val())  // Print out on
console.log($("#test1").val())  // Print out on12

3、 Use （.attr()） Take the attribute value —– It can't be used to judge whether the check box is selected

<input type="checkbox" name="test" id="test"/> // Not selected 
<input type="checkbox" name="test" id="test1"/ checked>  // Choose 12

We use console.log() take checked Print out the value of , The result is as follows ：

      Whether it is selected or not , The values taken are undefine, So we have to decide checkbox Selected state of , Out of commission .attr() Value 
1
console.log($("#test").attr())  // Print out undefine
console.log($("#test1").attr())  // Print out undefine12

4、 Use （.prop()） Get current status —— It can be used to judge whether the check box is selected

<input type="checkbox" name="test" id="test"/> // Not selected 
<input type="checkbox" name="test" id="test1"/ checked>  // Choose 12

We use console.log() take checked Print out the value of , The result is as follows ：

The selected status will get true, If it is not selected, you will get false, So we have to decide checkbox Selected state of , have access to .prop() Value

onsole.log($("#test").prop("checked"))  // Print out false
console.log($("#test1").prop("checked"))  // Print out true12

5、 Use （.is()）—- It can be used to judge whether the check box is selected

<input type="checkbox" name="test" id="test"/> // Not selected 
<input type="checkbox" name="test" id="test1"/ checked>  // Choose 12

Use $(“input[type=’checkbox’]”).is(‘:checked’) sentence , By using console.log() take checked Print out the value of , The result is as follows ：

The selected status will get true, If it is not selected, you will get false, So we have to decide checkbox Selected state of , have access to .is() Value

console.log($("#test").is(":checked"))  // Print out false
console.log($("#test1").is(":checked"))  // Print out true