javascript implements checkbox selection of properties

As anyone familiar with the development of the web front-end knows, it is a common practice to determine whether a check box is selected or not. There are many ways to determine this, but the compatibility of these methods is often ignored in the development process. Before the blogger user many methods, often Google to 1 some this bad that bad article, to the end of their own confusion. Today, I came across a foreign blog. I think it is very good. I plan to translate it into Chinese and add some of my own opinions.

If you are working on web development and there is a checkbox in your web page, you may need to determine if the checkbox is currently selected and execute some conditional statements. There are many ways to tell if a check box is selected.

Let's take a look at how native javascript judges this property. In javascript, after you have selected an element, you can easily tell whether the checkbox you have selected is selected by the checked attribute of that element.

Let's look at an example where you have a checkbox at the top of your page with a 1-only id, such as myCheckBox, as shown below:

<input type="checkbox" id="myCheckBox"/>

Now let's first select this element through javascript and then get its checked attribute.

    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 this element by id and then determine its checked attribute. If the checkbox is selected, it will have a value of true. If the checkbox is not selected, it will have a value of false.

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

Using is (' : checked ')

In this usage you will use jQuery's is() function. This function determines whether the selected element or set of elements meets the conditions you passed to the function, and if so, returns true, or false.

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

[/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 the prop ()

Before jQuery1.6, the function attr() was used to get the property and attributes of the elements, but it was very confusing. So after jQuery1.6, a new function prop() gets the current property value of the element.

But before we can do that, we need to understand the difference between property and attributes. attributes is a set of attribute values that you set for the HTML tag, including class, id and even the initial value of the input box. If you don't set the property value in the tag but instead get the property value via attr(), undefined will occur. prop() is also used to get the attribute value of an element, but unlike attr(), it correctly returns the required current attribute value even if the desired attribute is not defined in the html tag.

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

To intuitive reflect the difference between the two, you can visit the page loaded immediately after change the value of the input box, then you will find that even if you change the values of the input box, with attr () to obtain the attribute values will not be changed with the change of the text, by property () to obtain the attribute values will change with the change of the content of the text box.

For example, here we have an input box with initial values and some attribute property sets:

    <input type="text" id="myTextBox" value='set attribute value' />

And then in the JQuery code we say:

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

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

We will find that getting the value in the input box via prop() is always synchronized with the value in the input box, while getting the value 1 via attr() is always the value set in the html tag.

$('input[type="button"]').click(function () {

    alert('Attribute Value is : '+$('#myTextBox').attr('value'));

    alert('Property Value is : '+$('#myTextBox').prop('value'));

});

Using filter: checked

var isChecked = $('#myCheckBox:checked').length > 0;
Another way to determine the value of this attribute is to add a filter :checked when selecting the element, and then judge the element's attributes based on the length of the element obtained. This usage is not recommended, however, because when you have multiple groups of checkboxes on your page and use the class selector instead of the id selector, you may get the wrong answer.

$('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');

    }

});

As we can see, there are several ways to get the check item's selected property. This is where web developers often need to use it and get confused when choosing the right way to use it.

That's the end of this article. I hope it will be helpful for you to learn javascript.

Please take a moment to share this article with your friends or leave a comment. We will sincerely appreciate your support!