【第22期】观点:IT 行业加班,到底有没有价值?

js和jquery分别验证单选框、复选框、下拉框

转载 2016年08月30日 13:51:07

分别讲一下js和jQuery验证单选框(radio)、多选框(checkbox)、下拉框(select)

(1).首先说单选框(radio),radio和checkbox一样都是name相同值有多个在获取 radio 值的时候我们不能按照普通文本框.value的方式,而是要判断哪个被选中了。js验证是要用getElementsByName()获取数组

js代码如下:


  1. <script>
  2. function test(){
  3. var sex = document.getElementsByName("sex");
  4. var flag = 0;
  5. for (var i=0;i<sex.length;i++)
  6. {
  7. if (sex.item(i).checked == true)
  8. {
  9. flag = 1;
  10. break;
  11. }
  12. }
  13. if (!flag)
  14. {
  15. alert("请选择性别");
  16. }
  17. }
  18. </script>
  19. <input type="radio" name="sex" value="m"><input type="radio" name="sex" value="f">
  20. <input type="button" id="btn" value="提交" onclick="test()">

jQuery验证就简单多了,做到了少写多做,呵呵:

 


  1. <script src="jquery-1.7.1.min.js"></script>
  2. <script>
  3. $(document).ready(function(){
  4. $("#btn").click(function(){
  5. if ($(":radio:checked").length == 0)
  6. {
  7. alert("你的性别未选择");
  8. }
  9. });
  10. });
  11. </script>
  12. <input type="radio" name="sex" value="m"><input type="radio" name="sex" value="f">
  13. <input type="button" id="btn" value="提交">

 

  (2)复选框(checkbox),这个真不用讲了,因为复选框和单选框的做法完全相同,只要把上面脚本中radio改成checkbox就ok啦!

 

  (3)下拉框(select)

  使用js验证:

    js代码:


  1. <script>
  2. function test(){
  3. var sex = document.getElementById("sex").value;
  4. if (!sex)
  5. {
  6. alert("你的性别未选择");
  7. }
  8. }
  9. </script>
  10. <select id="sex">
  11. <option value="">--请选择性别--</option>
  12. <option value="m"></option>
  13. <option value="f"></option>
  14. </select>
  15. <input type="button" id="btn" value="提交" onclick="test()">

  使用jQuery验证:


  1. <script src="jquery-1.7.1.min.js"></script>
  2. <script>
  3. $(document).ready(function(){
  4. $("#btn").click(function(){
  5. if ($("#sex").val() == '')
  6. {
  7. alert("你的性别未选择");
  8. }
  9. });
  10. });
  11. </script>
  12. <select id="sex">
  13. <option value="">--请选择性别--</option>
  14. <option value="m"></option>
  15. <option value="f"></option>
  16. </select>
  17. <input type="button" id="btn" value="提交">

举报

相关文章推荐

jQuery判断checkbox,radio是否选中的3种方法

jQuery判断checkbox是否选中的3种方法 方法一: if ($("#checkbox-id").get(0).checked) { // do something }方法二: if(...

Jquery单选框、复选框、下拉框动态设置默认项,及动态获取选中项。

1.单选框Html代码: 女 男 请选择性别! class="col-sm-7">   class="rdio rdio-success col-sm-2">   id="...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

jquery获取单选框复选框下拉框值

jquery获取单选框(radio)复选框(checkbox)下拉框(select)的值,亲测可用。有什么疑问可以留言 效果图: html代码: body...

JQuery下拉框与复选框

1. 先看下一个例子: 首先是一个下拉框      选择资源类型: HTML页面      HTML页面   下载资源   超链接资源   自测题   课件资源   问卷调查   FAQ   文本及附...

jquery操作select下拉框的多种方法(选中,取值,赋值等)

Query获取Select选择的Text和Value: 语法解释: 1.$("#select_id").change(function(){//code...});   //为Select添加事件...

jquery指定下拉框选中

//这是修改时选中 $("#type").find("option[value='"+factory+"']").attr("selected",true); f...

JQuery操作 单选框、复选框、下拉框。

【单选框】                 1.获取选中值,三种方法都可以:     $('input:radio:checked').val();     $("input[type=...

query多选下拉框插件 jquery-multiselect

2010-10-15 jQuery多选插件文章分类:Web前端 下载地址:http://github.com/ehynds/jquery-multiselect 效果: demos 特性 •支持点击l...

jquery下拉框,单选框,复选框

jquery下拉框,单选框,复选框 收藏 下拉框: //得到下拉菜单的选中项的文本(注意中间有空格) var cc1 = $(".formc select[@name='country'] op...

jquery ztree 在树节点后面加复选下拉框

在ztree 3.5基础上改的,复选下拉框使用的multiselect,点击不同的父节点复选下拉框跟着移动,例子下载地址:http://dl5.csdn.net/fd.php?i=7011510845...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)