check box for the Web front End Select Properties

People familiar with the development of Web front-end know that check box is checked is often done, the method of judging many, but the development process often ignores the compatibility of these methods, but to achieve the effect is good. Bloggers before the user a lot of methods, often Google to some of this bad bad article, to the back of their own chaos. Today by chance to see a foreign blog, I think the explanation is very good, intends to translate into Chinese, and add some of their own ideas. The purpose of translation is to share to everyone, the second is to facilitate their own inspection. The original link is: http://conceptf1.blogspot.com/2014/10/checkbox-checked-property.html. 、

If you are in web development and have a check box in the Web page you are developing, you may want to decide whether the check box is currently selected, and then execute some conditional statements. There are a number of ways to determine whether a check box is selected.

Let's first look at how native JavaScript determines this property. In JavaScript, after you have selected an element, you can easily use the checked property of the element to determine if the check box you selected is selected.

Let's look at an example where there is a check box on your page with a unique ID, such as MyCheckBox , as shown below:

1 <input type= "checkbox" id= "MyCheckBox"/>

Now we first select this element with JavaScript and then get its checked property.

 1  function   Checkcheckbox () { if  (document.getElementById (' MyCheckBox ' ). checked) { 3  // change it to alert (' It Checked '); If you don't working with console  4  console.log (' It Checked ' ); 5 }  6  console.log (' No it not Checked ' 7   } 

As you can see, we first select this element by ID and then judge its checked property, if the check box is checked, its value is true, if the check box is not checked, its value will be false. Click to view the example.

If you're using jquery and you don't want to use native JavaScript to make this judgment, there are a number of ways:

(1) using is (': Checked ')

　　　　In this usage you will use the is () function of jquery. The function is to determine whether the selected element or collection of elements satisfies the condition parameter that you pass to the function, and returns true if the condition matches, otherwise false.

So in order to use this function, we need to select the element and then detect the selector: The value of checked , which applies to check boxes, radio buttons, and select labels. Click to view the example

$ (' input[type= "button"] "). Click (function  () {     if (' #myCheckBox '). Is (': Checked ') ) {         //change it toalert (' It Checked '), ifyou are not working with console        Console.log ( ' Its Checked ');      Else {         console.log (' No it not Checked ');     }});

(2) using prop ()

Before jQuery1.6, the function attr () was used to get the property and attributesof the element, but it was very easy to confuse people. So after jQuery1.6, a new function prop () to get the current property value of the element.

But before we do, we need to figure out The difference between the property and the attributes first. attributes are some of the property values you set for HTML tags, including the class you set for a tag, the ID, or even the initial value of the input box. If you do not set the property value in the tag but get the property value through attr () , the undefined will appear. prop () is also used to get the attribute value of an element, but the obvious difference from attr () is that even if you do not define the property you want to get in the HTML tag, you will be able to correctly return the current property value you want.

According to the official recommendation: properties with True and false two properties, such as checked, selected or disabled use prop (), and others using attr ().

To visualize the difference between the two, you can change the value of the input box immediately after the page is loaded, and you will find that even if the value of your input box changes, the value obtained with attr () will not change with the text, and the property () The value of the property to get will change as the contents of the text box change.

See an example:

Here we have an input box that sets the initial value and some attribute property sets:

<input type= "text" id= "MyTextBox" value= ' Set attribute value '/>

And then in the jquery code we write this:

1 console.log (' Attribute value is: ' +$ (' #myTextBox '). attr (' Value ')); 2 2 console.log (' Property Value is: ' +$ (' #myTextBox '). Prop (' Value '));

We will find that the value in the input box is always synchronized with the value in the prop (), and the value in the input box through attr () is always the value set in the HTML tag. Click to view the example

(3) using filter:checked

var isChecked = $ (' #myCheckBox: Checked '). length > 0;

Another way to determine the value of this property is to add a filter when selecting the element : checked, and then judging the element's attributes based on the length of the element being obtained. But this usage is not recommended, because when you have a lot of group checkboxes on your page and you use the class selector instead of the ID selector, the answer may be wrong. Click to view the example

We can see that there are several ways to get the selected attribute of the check. This is exactly what web developers often need to use and to confuse when choosing the right way to use it.

check box for the Web front End Select Properties