Javascript implements check box selection attribute_javascript skills

Anyone who is familiar with web front-end development knows that judging whether a check box is selected is something that is often done. There are many ways to judge, but the compatibility of these methods is often ignored during the development process, and the effect is achieved. I used to use many methods as a blogger. I often found articles on Google that were bad about this or that, and I was confused later on. I happened to see a foreign blog today and thought it explained it very well. I plan to translate it into Chinese and add some of my own opinions.

If you are engaged in web development and there are check boxes in the web pages you develop, you may need to determine whether the check box is currently selected and then execute some conditional statements. There are many ways to determine whether a checkbox is checked.

Let us first take a look at how native javascript determines this attribute. In JavaScript, after you select an element, you can easily determine whether the checkbox you selected is checked through the checked attribute of the element.

Let’s look at an example. There is a checkbox on your page and the checkbox has a unique id, such as myCheckBox, as shown below:

Copy code The code is as follows:

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

Copy code The code is as follows:

Function checkCheckBox() {
If (document.getElementById('myCheckBox').checked) {
                     //change it to alert('Its Checked'); if you not working with console
console.log('Its Checked');
         } else {
console.log('No its not Checked');
}
}

As you can see, we first select the element by id and then determine its checked attribute. If the check box is selected, its value is true. If the check box is not selected, its value will be false.

If you are using jQuery and you don’t want to use native javascript to make this judgment, there are many ways:

Use is(':checked')

In this usage you will use jQuery’s is() function. The function of this function is to determine whether the selected element or element collection meets the condition parameters you pass to the function. If the conditions are met, it returns true, otherwise it returns false.

So in order to use this function, we need to select the element and then check the value of the selector:checked. This selector works for checkboxes, radio buttons and select tags.

[/code]
$('input[type="button"]').click(function () {
If ($('#myCheckBox').is(':checked')) {
                     //change it to alert('Its Checked'); if you not working with console
console.log('Its Checked');
         } else {
console.log('No its not Checked');
}
});
[/code]

Use prop()

Before jQuery 1.6, the function attr() was used to obtain the properties and attributes of elements, but it was very confusing. So after jQuery 1.6, a new function prop() is used to obtain the current property value of the element.

But before that, we first need to understand the difference between property and attributes. Attributes are some attribute values ​​​​that you set for HTML tags. This includes the class and id you set for a tag and even the initial value you set for the input box. If you do not set the attribute value in the tag but get the attribute value through attr(), undefined will occur. prop() is also used to obtain the attribute value of an element, but the obvious difference from attr() is that even if the attribute you want to obtain is not defined in the html tag, it can still correctly return the required current attribute value.

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

In order to intuitively reflect the difference between the two, you can change the value of the input box immediately after the page is loaded. At this time, you will find that even if the value of your input box changes, use attr() to obtain it. The property value will not change as the text changes, but the property value obtained through property() will change as the content of the text box changes.

Look at an example, here we have an input box with an initial value set and some attribute sets:

Copy code The code is as follows:

Then in the JQuery code we write:

Copy code 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, while the value in the input box obtained through attr() is always set in the html tag. value.

Copy code 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 for judging the value of this attribute is to add a filter: checked when selecting elements, and then judge the attribute of the element based on the length of the obtained element. But this usage is not recommended, because when you have many groups of checkboxes on your page and use the class selector instead of the id selector, the answers you get may be wrong.

Copy code The code is as follows:

$('input[type="button"]').click(function () {
If ($('#myCheckBox:checked').length > 0 ) {
//change it to alert('Its Checked'); if you not working with console
console.log('Its Checked');
} else {
console.log('No its not Checked');
}
});

We can see that we have several methods to obtain the selected attribute of the check item. This is exactly what web developers often need to use and get confused when choosing the correct way to use it.

The above is the entire content of this article. I hope it will be helpful to everyone learning javascript.

Please take a moment to share the article with your friends or leave a comment. We will sincerely thank you for your support!