How to Check if the Checkbox is Selected in jQuery
本文由发表于8年前 | Javascript | 评论数 3 |  被围观 7,481 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 指弹吉他 && 技术 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 代理设置问题引起的UnKnownHostException Jsoup执行execute()错误 2013/9/9
2 Java基础笔记 – 面向对象三个特征 继承、封装、多态及编程细节提示 2011/10/25
3 web组件的设计思路与编写 效率问题 2013/3/17
4 JSP的运行机制与原理 2011/6/17
5 C++语法笔记 – 类与对象 2011/9/3
6 jQuery中使用$.post提交Ajax请求及传参问题 2011/6/2
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

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

联系我们:admin@itzhai.com

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