Introduction to the HTML check box and single-dataset checkbox and radio events _ basic knowledge

Source: Internet
Author: User
The choice of checkbox and radio events once confused me and started with my understanding of js. I think the change event should be the most reasonable, unfortunately, in ie, the change event triggers the checkbox and radio events only when the focus leaves after the change event. At one time, I was confused.

In my understanding of js, I think the change event should be the most reasonable. Unfortunately, the change event in ie is triggered only when the focus leaves after the change.
Later, click mousedown and other mouse events were used. Click is more perfect than mousedown:

After radio registers the click event, the magic is that when the upper, lower, and left buttons on the keyboard are selected, the mouse event is triggered, and the scroll wheel is also triggered, this magical thing won't happen under mousedown. (Webkit cannot be selected from top to bottom)
After the checkbox registers the click event, the miracle is staged again. When we select the checkbox with spaces, the magic click event is triggered again, and the mousedown is wiped by the miracle again. (Webkit still cannot be selected with spaces)

Let's use click to reduce the burden on the two brothers. Don't bind them with a bunch of events for their inherent shortcomings. click is omnipotent for these two guys. Worship ~~~

When using a form to design a questionnaire, it is a good idea to use a selection box to reduce user operations. There are two selection boxes in the tag: single choice and check box. The difference between the two is that option users in a single choice can only select one, and option users in the check box can select any number or even all. See the following example:

The source code of this example is given below, and parameters are set in combination with the code:



From the source code, we can see that to create a single producer, you only need Set the marked type parameter to type = "radio ". Set the marked type parameter to type = "checkbox. The selection box used in practical applications depends on actual needs. If you only need one option, use a single region. In this example, "Do you like traveling ?" This problem is caused by a single choice. If you are allowed to have multiple options, use the check box. In this example, "are you interested in those sports ?" This problem occurs because one person may be interested in many aspects, so the check box is used.

In When the checked parameter is set in the tag, the selection box is selected by default. In this example, the first single sequence ("like" The single sequence below) is set to the default one, so that if you want to select "like", you don't have to select another one. Of course, if you want to select "dislike", you only need to click the single region under "dislike", and the default value is automatically canceled. In the same way, you can set a check box to be selected by default. However, by default, the check box cannot be abused. Otherwise, it will arouse users' dislike.

Remember to put all The name attribute of this object is set to the same, for example, name = "radiobutton" in the previous example. Remember that it is not an ID attribute. Only in this way can the single-choice effect be achieved, otherwise, you can select "like", "dislike", and "indifferent" in the above example at the same time. Remember!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.