JS and jquery Verify the _javascript of the Radio box, check box and dropdown box respectively.

Source: Internet
Author: User

This paper describes the JS and jquery verification of the single box (radio), Multiple marquee (checkbox), Drop-down box (select), share for everyone to refer to, the specific content as follows
(1). First of all, the Radio box (radio),Radio and checkbox are the same name the same value has multiple when we get the radio value we can't follow the normal text box. Value, but to determine which is selected.

JS verification is to use Getelementsbyname () to get the array
The JS code is as follows:

 <script>
 function Test () {
 var sex = document.getelementsbyname ("Sex");
 var flag = 0;
 for (Var i=0;i<sex.length;i++)
 {
 if (Sex.item (i). checked = = true)
 {
  flag = 1;
  break;
 }
 }
 if (!flag)
 {
 alert ("Please select Gender");
 }
 </script>
 <input type= "Radio" name= "Sex" value= "M" > Male <input type= "Radio" name= "Sex" value= "F" > Female
 <input type= "button" id= "BTN" value= "submit" onclick= "Test ()" >

With jquery verification is much simpler, do less write more do, hehe:

<script src= "Jquery-1.7.1.min.js" ></script>
 <script>
$ (document). Ready (function () {
$ ("#btn"). Click (function () {
if ($ (": radio:checked"). Length = = 0)
{
alert ("Your sex is not selected")
;
} );
 </script>
 <input type= "Radio" name= "Sex" value= "M" > Male <input type= "Radio" name= "Sex" value= "F" > Female
 <input type= "button" id= "BTN" value= "Submit" >

(2) check box (checkbox), This is really needless to say, because the check box and the practice of the radio box is exactly the same, as long as the above script radio changed to checkbox on the OK!

(3) Drop-down box (SELECT)
Use JS verification, JS code:

<script>
function Test () {
var sex = document.getElementById ("Sex"). Value;
if (!sex)
{
alert ("Your sex is not selected");
}
 </script>
 <select id= "Sex" >
<option value= "" >--Please select gender--</option>
<option Value= "M" > Men </option>
<option value= "F" > Women </option>
 </select>
 <input Type= "button" id= "BTN" value= "submit" onclick= "Test ()" >

Using jquery authentication:

 <script src= "Jquery-1.7.1.min.js" ></script>
 <script>
$ (document). Ready (function () {
$ ("#btn"). Click (function () {
if ($ ("#sex"). val () = = ')
{
alert ("Your sex is not selected");
}});
 </script>
 <select id= "Sex" >
<option value= "" >--Please select Gender--</option>
<option value= "M" > Men </option>
<option value= "F" > Women </option>
 </select>
 <input type= "button" id= "BTN" value= "Submit" >

If you want to learn more, you can click the jquery dropdown box effect summary, JavaScript drop-down Box effect summary to learn.

The above is about JS and jquery verification of the single selection box, check box, drop-down box code, according to difficult to introduce, I hope to help you learn.

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.