How to Check if the Checkbox is Selected in jQuery
本文由发表于6年前 | Javascript | 评论数 3 |  被围观 8,857 views+

When the form submitted from the browser,we can use jQuery to count the selected number of checkboxes and to do judgment in order to get the message from the checkboxes. The next,we can prompt the error message or show the result.

Firstly,create a html page. The code are given below:
<form id="register" method="post" action="">
	<input type="checkbox" id="c" name="c" value="10" class="bookcss" /> C <br />
	<input type="checkbox" id="c++" name="c++" value="10" class="bookcss" /> C++ <br />
	<input type="checkbox" id="java" name="java" value="10" class="bookcss" /> Java <br />
	<input type="checkbox" id="assembly language" name="" value="10" class="bookcss" /> Assembly Language
 <br />
 	<span class="error">Please select one checkbox at least</span>
	<p class="result"></p>
 	<input type="submit" class="submit" value="submit" />
</form>
Secondly, we code the JavaScript to validate the submitted message,and show the result on the HTML page.The code are given below:
<script type="text/javascript">
	$(document).ready(function() {
		$('.error').hide();
		$('.submit').click(function(event){
			var count=0;
			$('form').find(':checkbox').each(function(){
				if($(this).is(':checked')){
					count++;
				}
			});
			if(count==0) {
				$('.result').hide();
				$('.error').show();
			} else {
				$('.error').hide();
				$('.result').show();
				$('.result').text('you have select '+count+' books');
			}
			event.preventDefault();
		});
	});
</script>
除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/how-to-check-if-the-checkbox-is-selected-in-jquery.html
关键字: , ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 5/11
文章评论
    3条评论
  1. 吴贤茂 2011年05月12日10:58:14  #-49楼 回复 回复

    哈哈…开始学习jQuery啦?

    还没选中的时候输出error里面的Please select one checkbox at least

    当选择的时候输出you have select 你所选择的数量 books

    理解应该没错吧- -!

    • arthinking 2011年05月12日11:02:43 回复 回复

      嗯,没有选中提交时会输出error里面的信息…项目中要用到,只能去学习一下了

    • arthinking 2011年05月12日11:03:22 回复 回复

      O(∩_∩)O哈哈~大师,不懂就问你了

给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 在Linux中安装JDK和配置环境变量 2012/7/31
2 Java虚拟机笔记 – JVM 类的卸载 2011/11/5
3 软件工程实现-软件测试 软件配置 2011/7/1
4 Java基础笔记 – 线程的生命周期 线程的状态 优先级和常用方法 2011/10/24
5 JVM笔记 – 自动内存管理机制(垃圾收集器与内存分配策略) 2014/11/26
6 Struts2单选按钮标签s:radio的使用及其设置默认值 2011/9/10
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.