Javascript implementation check box select attribute _ javascript tips-js tutorial

This article introduces a blog written by a foreign user about how to select attributes of the check box, I hope my friends will like it. Anyone familiar with web Front-end development knows that checking whether the check box is selected is a frequent task and there are many judgment methods. However, the compatibility of these methods is often ignored during development, but the effect is good. Many methods have been used by bloggers before. They often Google some bad articles and are confused by themselves. Today, I accidentally saw a foreign blog and thought it was a good explanation. I planned to translate it into Chinese and added some of my own opinions.

If you are engaged in web development and there is a check box in the webpage you are developing, you may need to determine whether the check box is selected and then execute some conditional statements. There are many ways to determine whether a check box is selected.

Let's take a look at how native javascript judges this attribute. In javascript, after you select an element, you can easily determine whether the check box is selected by using the checked attribute of the element.

Let's take an example. There is a check box on your page and the check box has a unique id, such as myCheckBox, as shown below:

The Code is as follows:

Now we first select this element through javascript and then obtain its checked attribute.

The Code is as follows:

Function checkCheckBox (){
If (document. getElementById ('mycheckbox'). checked ){
// Change it to alert ('its checked'); if you are not working with console
Console. log (Its Checked ');
} Else {
Console. log ('no its not checked ');
}
}

We can see that this element is selected by id and then its checked attribute is determined. If the check box is selected, its value is true. If the check box is not selected, the value is false.

If you are using jQuery and you do not want to use native javascript For this judgment, there are many methods:

Use is (': checked ')

In this usage, you will use jQuery's is () function. This function is used to determine whether the selected element or element set meets the condition parameters you pass to the function. If the conditions are met, true is returned. Otherwise, false is returned.

To use this function, we need to select the element and check the value of the selector: checked. This selector applies to check boxes, single-choice buttons, and select labels.

[/Code]
$ ('Input [type = "button"] '). click (function (){
If ($ ('# mycheckbox'). is (': checked ')){
// Change it to alert ('its checked'); if you are not working with console
Console. log (Its Checked ');
} Else {
Console. log ('no its not checked ');
}
});
[/Code]

Use prop ()

Before jQuery1.6, the attr () function is used to obtain the property and attributes of an element, but it is very confusing. Therefore, after jQuery1.6, a new function prop () is used to obtain the current property value of the element.

But before that, we need to first understand the difference between property and attributes. Attributes is the attribute value you set for the HTML Tag. This includes the class and id you set for a tag, and even the same initial value for the input box. If you do not set the attribute value in the tag but use attr () to obtain the attribute value, undefined may occur. Prop () is also used to obtain the attribute value of an element, but it is significantly different from attr (), even if you do not define the desired attribute in an html tag, you can also return the expected current property value correctly.

According to official recommendations: attributes with true and false attributes, such as checked, selected, or disabled, use prop (), and others use attr ().

To intuitively reflect the differences between the two, you can change the value of the input box immediately after loading the page. At this time, you will find that even if the value of your input box changes, the attribute values obtained by using attr () do not change with the text, but the values obtained by using property () change with the content of the text box.

Let's look at an example. Here we have an input box that sets the initial value and some attribute sets:

The Code is as follows:

Then, in the JQuery code, we write:

The Code is as follows:

Console. log ('attribute Value is: '+ $ (' # myTextBox '). attr ('value '));
Console. log ('Property Value is: '+ $ (' # myTextBox '). prop ('value '));

We will find that the value in the input box obtained through prop () is always synchronized with the value in it, and through attr () the value in the input box is always set in the html Tag.

The Code is as follows:

$ ('Input [type = "button"] '). click (function (){
Alert ('attribute Value is: '+ $ (' # myTextBox '). attr ('value '));
Alert ('Property Value is: '+ $ (' # myTextBox '). prop ('value '));
});

Use filter: checked

Var isChecked = $ ('# myCheckBox: checked'). length> 0;
Another method used to determine the value of this attribute is to add a filter: checked when selecting an element, and then judge the attribute of the element based on the length of the obtained element. However, this method is not recommended, because when there are many check boxes on your page and the class selector is used instead of the id selector, the answer may be wrong.

The Code is as follows:

$ ('Input [type = "button"] '). click (function (){
If ($ ('# myCheckBox: checked'). length> 0 ){
// Change it to alert ('its checked'); if you are not working with console
Console. log (Its Checked ');
} Else {
Console. log ('no its not checked ');
}
});

We can see that there are several ways to obtain the selected attributes of a selected item. This is precisely what web developers often need and is confusing when choosing the correct method.

The above is all the content of this article. I hope it will be helpful for you to learn javascript.

Please take a moment to share your article with your friends or leave a comment. Thank you for your support!