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="提交">

使用js实现全选 单选 全部选

/ 思路:1、获取元素。2、用for循环历遍数组,把checkbox的checked设置为true即实现全选, // 把checkbox的checked设置为false即实现不选。3、通过if判断,...
  • chen529834149
  • chen529834149
  • 2016年01月25日 19:12
  • 3745

使用jQuery实现单选框和复选框以及select

一、jquery实现单选框并选中value=”2”的项: html代码:1 2 3js代码实现:jQuery("input[ty...
  • u011641865
  • u011641865
  • 2016年04月06日 17:51
  • 1846

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

jquery获取单选框(radio)复选框(checkbox)下拉框(select)的值,亲测可用。有什么疑问可以留言 效果图: html代码: body...
  • qq_19558705
  • qq_19558705
  • 2016年02月18日 15:40
  • 5336

关于JQuery validate表单校验插件对级联下拉框的校验问题

今天在使用JQuery validate表单校验插件时,遇见了一个
  • w1014074794
  • w1014074794
  • 2014年09月18日 16:07
  • 3035

JavaScript JavaScript对checkbox的校验

下面展示下利用 JavaScript 对 checkbox 中某一项是否被选中进行校验, 若没有校验 ,给予提示信息。 实现的效果: checkbox部分的校验代码: 页面代码 che...
  • u010003835
  • u010003835
  • 2016年01月06日 17:15
  • 1299

使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理

使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理 $(function (){ $(":text").blur(function (){ var cont...
  • u014740338
  • u014740338
  • 2015年01月18日 18:40
  • 1364

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

jquery获取单选框(radio)复选框(checkbox)下拉框(select)的值,亲测可用。有什么疑问可以留言 效果图: html代码: body...
  • qq_19558705
  • qq_19558705
  • 2016年02月18日 15:40
  • 5336

关于JQuery validate表单校验插件对级联下拉框的校验问题

今天在使用JQuery validate表单校验插件时,遇见了一个
  • w1014074794
  • w1014074794
  • 2014年09月18日 16:07
  • 3035

validate针对checkbox、radio、select标签的验证

jquery.validate 是jquery的一个插件,用来辅助开发者在客户端方便快捷的实现表单验证,最终达到提高用户体验的目的。 示例代码 form id="for...
  • qq_29763707
  • qq_29763707
  • 2016年09月09日 13:16
  • 12321

使用jQuery实现单选框和复选框以及select

一、jquery实现单选框并选中value=”2”的项: html代码:1 2 3js代码实现:jQuery("input[ty...
  • u011641865
  • u011641865
  • 2016年04月06日 17:51
  • 1846
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js和jquery分别验证单选框、复选框、下拉框
举报原因:
原因补充:

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