`

Js/Jquery 实现checkbox全选，反选，全不选

Jqueryjs实现checkbox全选反选全不选 
阅读更多

Use by JS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>js实现checkbox全选，反选，全不选</title>
    <script type="text/javascript">
        //复选框全选
        function checkAll(formvalue) {
            var roomids = document.getElementsByName(formvalue);
            for (var j = 0; j < roomids.length; j++) {
                if (roomids.item(j).checked == false) {
                    roomids.item(j).checked = true;
                }
            }
        }

        //复选框全不选
        function uncheckAll(formvalue) {
            var roomids = document.getElementsByName(formvalue);
            for (var j = 0; j < roomids.length; j++) {
                if (roomids.item(j).checked == true) {
                    roomids.item(j).checked = false;
                }
            }
        }

        //复选框选择转换
        function switchAll(formvalue) {
            var roomids = document.getElementsByName(formvalue);
            for (var j = 0; j < roomids.length; j++) {
                roomids.item(j).checked = !roomids.item(j).checked;
            }
        }

    </script>
</head>
<body>
  <input type="radio" name="all" id="all" onclick="checkAll('test')" />
    全选
    <input type="radio" name="all" id="Checkbox1" onclick="uncheckAll('test')" />
    全不选
    <input type="radio" name="all" id="Checkbox2" onclick="switchAll('test')" />
    反选<br />
    <input name="test" value="复选框1" type="checkbox" />复选框1<br />
    <input name="test" value="复选框2" type="checkbox" />复选框2<br />
    <input name="test" value="复选框3" type="checkbox" />复选框3<br />
    <input name="test" value="复选框4" type="checkbox" />复选框4<br />
    <input name="test" value="复选框5" type="checkbox" />复选框5<br />
    <input name="test" value="复选框6" type="checkbox" />复选框6<br />
</body>
</html>
 

 

update by xdwang  2012-11-30

Use by JQuery

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="./res/js/jquery-1.8.2.js">
</script>
<title>JQuery实现checkbox全选，反选，全不选</title>
<script type="text/javascript">

	
	//复选框选择
	function checkboxOnclick(){
		if($("[name='test'][checked]").length>1){
			$("input[name='test']").each(function(){
				$(this).attr("checked",false);
			});  
		}else{
			$("input[name='test']").each(function(){
				$(this).attr("checked",true);
			});  
		}
	}
	
	//获取选中复选框的值，一般在批量删除时需要使用
	function getCheckBoxValues(){
		var idsStr="";
		$("input[name='test']").each(function(){
			if($(this).attr("checked") == "checked"){
				if($(this).val()!=""){
					idsStr+=$(this).val()+",";
				}
			}
		});
		if(idsStr!=""){
			//进行删除
			alert(idsStr);
		}else{
			alert("请选择需要删除的记录!");
		}
		
	}
</script>
</head>
<body>
	
	<input name="test" value="" type="checkbox" onclick="checkboxOnclick()" /> 复选框 <br />
	<input name="test" value="1" type="checkbox" /> 1 <br />
	<input name="test" value="2" type="checkbox" /> 2 <br />
	<input name="test" value="3" type="checkbox" /> 3 <br />
	<input name="test" value="4" type="checkbox" /> 4 <br />
	<input name="test" value="5" type="checkbox" /> 5 <br />
	<input name="test" value="6" type="checkbox" /> 6 <br />
	<input type="button" value="获取选中复选框的值集合" onclick="getCheckBoxValues()">
</body>
</html>
 

 

 

分享到：
| Ajax入门
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery、js操作checkbox全选反选.docx

    jquery、js操作checkbox全选反选.docx

    利用jQuery实现CheckBox全选/全不选/反选的简单代码

    jQuery有些版本中实现CheckBox全选/全不选/反选会有bug，经测试jquery-1.3.1.js–&gt;测试通过，jquery-1.5.1.js–&gt;测试不通过。 实现CheckBox全选/全不选/反选代码如下： &lt;&#37;@ page language="java" ...

    jQuery实现复选框checkbox全选、反选功能.rar

    jQuery实现复选框checkbox的全选与反选功能，不用多介绍了吧，以往都是基于纯js的实现比较多，这个是引入了jquery，或许更能满足现在的前端设计吧。

    jQuery表格行全选反选单选代码.zip

    jQuery表格行全选反选单选代码是一款基于tableCheckbox.js插件实现的，鼠标点击表格行时候能选中行内的复选框，且当前行会高亮显示，支持shift多选。

    jquery checkbox全选反选效果代码

    运行后查看效果，需要刷新下。 jquery事件2 你最喜欢的体育运动是? 你的姓名: 足球 篮球 兵乓球 游泳 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    Jquery CheckBox全选方法代码附js checkbox全选反选代码

    jquery方法如下： 代码如下: function CheckAll(val) { $(“input[name=’chkJob’]”).each(function() { this.checked = val; }); $(“#chkAll”).attr(“checked”, val);... eg： javascript 全选反选代码 代码如下

    jquery、js操作checkbox全选反选

    操作checkbox，全选反选 代码如下: //全选 function checkAll() { $(‘input[name=”TheID”]’).attr(“checked”, “checked”); } //反选 function uncheckAll() { $(‘input[name=”TheID”]’).each(function()...

    三个基于jQuery的JS复选框全选反选例子

    摘要:脚本资源,jQuery,全选,反选　三个基于jQuery的JS复选框全选反选例子，实用的网页特效，三款例子大同小异。所有checkbox跟着全选的checkbox走，定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，...

    jQuery实现checkbox列表的全选、反选功能

    我们在做列表的时候经常会遇到全选，反选进行批量处理问题，例如： 　我当时就是简单的实现了，然后想封装到公共的js中，封装的太烂，不好意思贴出来了（就是把实现代码之间放到公共js中，然后每个页面都用固定的id...

    jquery复选框CHECKBOX全选、反选

    使用方法:我们先把下面的JS保存为有个文件,到时候调用，淡然你也可以直接写在页面内,推荐使用前者,方便重用: 代码如下:(function($){ $.fn.checkgroup = function(options){ //merge settings settings=$.extend({ ...

    js, jQuery实现全选、反选功能

    js ，jq实现全选、反选功能： js:思路：1.点击全选按钮实现，下面内容全选，与反选 2.下面有一个没有选中时，全选按钮不勾选，当全部选中时才全选。这里引入一个计数器，来判断是否全部选中。 &lt;!DOCTYPE html&gt; &...

    js与jQuery实现checkbox复选框全选/全不选的方法

    主要介绍了js与jQuery实现checkbox复选框全选/全不选的方法,结合实例较为详细的分析了JavaScript与jQuery针对checkbox复选框全选与反选的操作技巧,需要的朋友可以参考下

    jquery实现简单的全选和反选功能

    首先我们看个简单的实例 &lt;!DOCTYPE ...&lt;... &lt;head runat=server&gt;...jQuery实现CheckBox全选、全不选&lt;/title&gt; &lt;script src=http://code.jquery.com/jquery-1.4.4.min.js type

    全选 ，反选 jQuery

    用JavaScript使页面上的一组checkbox全选/取消全选，逻辑很简单，实现代码也没有太难的语法。但使用jQuery实现则更简单，代码也很简洁，精辟！

    checkbox样式美化及全选反选插件

    复选框单选框的美化及勾选插件

    基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能

    建议有js基础,了解jquery,thinkphp,废话不说多下面就上代码 《————HTML————》 //thinkphp循环显示把data里fid赋予多选框 &lt;td&gt;&lt;input type=checkbox value={$vo.fid}/&gt;&lt;/td&gt;//可在后面加td输入参数...

Magicbox
Global site tag (gtag.js) - Google Analytics