HTML check box and radio box checkbox and Radio Event Introduction _ Basics

Source: Internet
Author: User

I was puzzled by the choice of checkbox and radio's events for a while.

Beginning with my understanding of JS, I think the change event should be the most reasonable, but Ah, ie under the changes event is changed after the focus left to trigger.
Then use click MouseDown and other mouse events instead. Find that click is more perfect than MouseDown:

Radio registered after the Click event, the magic is to use the keyboard up and down around the choice, incredibly will trigger the mouse event, the wheel will also trigger, this magical thing under the MouseDown is not going to happen. (WebKit can not use up and down choice)
CheckBox Registration Click event, the Miracle again staged, when we use the space to select the checkbox, the Magic Click event to trigger again, and MouseDown again with a miracle rub past. (WebKit still cannot be selected by space)

Let us all use Click, give these two brother Burden, do not for their congenitally deficient to bind a bunch of events, for these two guys click is omnipotent. Worship a bit ~ ~ ~

In order to reduce user action when designing questionnaires with forms, it is a good idea to use a selection box in the HTML <input> tag, which is the difference between a single selection box and a check box, which is the choice of an option in a radio box. The options in the check box allow users to select multiple items, or even all of them. Take a look at the following example:

Here is the source code for this example, combining the code to set the parameters:
<form name= "Form1" >
Do you like traveling? Please select:

Copy Code code as follows:

<input type= "Radio" name= "RadioButton" value= "RadioButton" checked> like
<input type= "Radio" name= "RadioButton" value= "RadioButton" > Dislike
<input type= "Radio" name= "RadioButton" value= "RadioButton" > No matter <br>

You are interested in those sports, please choose:
Copy Code code as follows:

<input type= "checkbox" Name= "CheckBox1" value= "checkbox" > Running
<input type= "checkbox" Name= "CheckBox2" value= "checkbox" > Play
<input type= "checkbox" Name= "Checkbox3" value= "checkbox" > Mountaineering
<input type= "checkbox" Name= "checkbox4" value= "checkbox" > Bodybuilding <br>
</form>


From the source above, it can be seen that the production of a radio box as long as the <input> tag type parameter set to Type= "Radio" on the line, and make a check box as long as the <input> tag type parameter set to Type= checkbox "On the line." As for the actual application of that selection box, depending on the actual needs. If the user has only one option, use a radio box, as in this case, "Do you like traveling?" This problem, the user can only be a choice, so the use of a radio box, if you allow users to have a number of selected content, the check box, as in this case, "you are interested in those sports?" This problem, because a person's interest may be multifaceted, so the use of a check box.

Set the checked parameter in the <input> tag, the marquee is selected by default. The first radio box (like the one below) is set to the default selection, as shown in this example. In this way, if users want to choose "like", you can no longer choose, of course, if users want to choose "Do not like", you just click on the "Do not like" under the Radio box, and the default value is automatically canceled. You can also set a check box to be selected by default in the same way. However, the default check box is not abused, otherwise it will cause users to resent.

In radio, be sure to remember to put all the <input type= ' Radio ' > The object's name attribute to the same, such as the Name= "RadioButton" in the example above, remember that is not the id attribute, only in this way to achieve the effect of a single election, Otherwise, the above example of ' like ', ' do not like ', ' indifferent ' can be selected 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.