Operation Checkbox label and checkbox label

Operation Checkbox label and checkbox label

In front-end development, Checkbox operations are indispensable.

There are two common methods:. is () and. prop. The former is used to determine the status of the checkbox. The latter sets a value for the checkbox, which can be set to true or false.


Write a small example and practice:
In html:

<input id="Checkbox1" type="checkbox"  /><input id="Text1" type="text"   />

 

Assign a value to this text box. The value is the checkbox value. The only difference is whether the user selects the checkbox or not.

The above code, if you do not want to use if, can refer to the following jQuery code to modify, the final result is the same:

 

$ ('# Checkbox1 '). change (function () {var self = $ (this); // if (self. is (": checked") {// self. attr ("checked", true); // else {// self. attr ("checked", false); //} self. attr ("checked", self. is (": checked"); $ ('# text1 '). val (self. is (': checked '));});Source Code

 

Real-time Demonstration:

 

The following describes how to set a value for checkbox in The. prop () method.
The preceding example is called to determine whether or not to select the checkbox based on the value entered in the text box.
When the user inputs "true", the checkbox is the selected status. When the user inputs any non-"true" value or is not filled in, the checkbox status is not selected.

<input id="Text1" type="text" /><input id="Checkbox1" type="checkbox" />

 

Write jQuery code:

 

Demo: