jquery操作checkbox方法(全选、全不选、至少选择一个、选择值/文本)

原创 2016年08月30日 17:33:07

在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值,还有获得选中的文本,以下给出demo,使用jquery方法操作checkbox

demo:

<!DOCTYPE html>
<html>
	<head >
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jquery操作checkbox方法(全选、全不选、至少选择一个、选择值/文本)</title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
	<script type="text/javascript" >
		 //全选
		 function selectAll() {
			 //方法一:
			 $("input[name='bjjb']").attr("checked",true);
			 //方法二:
			 /**$("input[name='bjjb']").each(function(){
			      $(this).attr("checked",true);
			 });*/
			 //获得checkbox的值和文本
			  $("#checked").html("");
			  $("#checkedText").html("");
			  $("input[name='bjjb']:checked").each(function () {
					$("#checked").append($(this).val()+",");
					//注意文本一定要元素标签如span否则next得不到值
					$("#checkedText").append($(this).next().text()+",");
			  });
		 }
		 //取消全选
		 function selectNone(){
			 //方法一:
			$("input[name='bjjb']").removeAttr("checked");
			//方法二:
            /*$("input[name='bjjb']").each(function(){
			      $(this).attr("checked",false);
			 });*/
			  //获得checkbox的值和文本
			  $("#checked").html("");
			  $("#checkedText").html("");
			  $("input[name='bjjb']:checked").each(function () {
					$("#checked").append($(this).val()+",");
					//注意文本一定要元素标签如span否则next得不到值
					$("#checkedText").append($(this).next().text()+",");
			  });
		 }
		 //反选
		 function selectInvert() {
			$("input[name='bjjb']").each(function(index,item){
				 if ($(this).attr("checked")) {
					$(this).removeAttr("checked");
				 } else {
					$(this).attr("checked", true);
				}
			});
		 }
        function selectOne() {
			var checked=$("input[name='bjjb']:checked");
			if(checked.length==0){
				alert("请至少选择一个");
				return ;
			}
            $("#checked").html("");
			$("#checkedText").html("");
			$("input[name='bjjb']:checked").each(function () {
			    $("#checked").append($(this).val()+",");
				//注意文本一定要元素标签如span否则next得不到值
				$("#checkedText").append($(this).next().text()+",");
			});
			
		}


	 </script>
    </head>
    <body>
		<form  id="" action="" method="post">
			<div >
				<input type="checkbox" name="bjjb" value="1"/><span>交通事故</span></br>
				<input type="checkbox" name="bjjb" value="2"/><span>自然灾害</span></br> 
				<input type="checkbox" name="bjjb" value="3"/><span>恶劣天气</span></br>  
				<input type="checkbox" name="bjjb" value="4"/><span>严重违法行为</span></br>
				<input type="checkbox" name="bjjb" value="5"/><span>路面损毁</span></br>
			</div>
			<div style="margin-top:10px;">
				<input type="button"   onclick="selectAll()"   value="全选" />
				<input type="button"   onclick="selectNone()"    value="全不选" />
				<input type="button"   onclick="selectInvert()"   value="反选" />
				<input type="button"   onclick="selectOne()"    value="必须选择一个" />
			</div>
		    <div style="margin-top:10px;">
				选中项:<div id="checked"></div>
				选中文本:<div id="checkedText"></div>
			</div>
		</form>
  </body>
</html>
备注:案例中给出一些常见的jquery操作checkbox,文本值必须用元素标签如span或者label,否则$(this).next().text()获得的值为空字符串

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

使用 jquery 获取一组或者单个 checkbox 的选中状态的值

使用 jquery 获取一组或者单个 checkbox 的选中状态的值。下面通过一个示例进行说明,假设现有一页面有一组 checkbox 的 name 的值为 id ,那么获取这组 name=id 的...

如何利用jQuery使复选框一键全选/全不选

我们先写一个表单: 你爱好的运动是? 全选/不全选 1 2 3 4 在第一个复选框中添加click()事件, 核心的jQuery代码如下: $(document)...

jquery判断checkbox全选,全取消

if($("input[name='checkall']").is(':checked')){ $("[name='checkall']:checkbox").attr('checked',...
  • a138984
  • a138984
  • 2016年01月08日 13:48
  • 1784

jQuery实现Checkbox全选功能

jQuery实现勾选CheckAll时选中某一类全部的checkbox;当这一类中的checkbox有一个没有被选中,则CheckAll就不应该被勾选;如果所有的checkbox被选中,则CheckA...

JQuery实现的 checkbox 全选、反选。

发现网上写的全选的代码,不是完整的,是有bug的。全选它分几种情况 1. 全选的checkbox选中时,子checkbox全部选中。反之,全部不选 2.子checkbox中,只要有没有被选中的,取...
  • hardwin
  • hardwin
  • 2012年06月16日 15:20
  • 71095

判断多个checkbox复选框至少选一个

判断多个checkbox复选框至少选一个 复选框选中

checkbox,js验证必须选择一个

Js: var obj = document.getElementsByName('cat4[]'); var count=obj.length; var j=0; for...

用jquery获得选择的checkbox的文字值

音乐     美术     信息技术     运动     单选     var hobbies;     $("input[name=likes]").change(functi...

Jquery操作select,radio,checkBox,获取选中项的值和文本,根据值和文本设置选中项

来之http://blog.csdn.net/wangsen2235068/article/details/8910423   "../Scripts/jquery-1.4.1.min.js">  ...

javascript复选框全选、全不选、反选、必选一个

复选框全选、全不选、反选、必选一个
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery操作checkbox方法(全选、全不选、至少选择一个、选择值/文本)
举报原因:
原因补充:

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