jquery 实现全选,反选,全不选等功能

前端APP 投稿 14900 0 评论

jquery 实现全选,反选,全不选等功能

jquery 实现全选,反选,全不选等功能,下面直接以例子进行说明。

设页面有如下一组复选框和几个相关按钮(全选,反选,全不选等):


<input type="checkbox" name="fruit" value="apple" />苹果
<input type="checkbox" name="fruit" value="orange" />橘子
<input type="checkbox" name="fruit" value="banana" />香蕉
<input type="checkbox" name="fruit" value="grape" />葡萄

<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="全不选">
<input type="button" id="btn3" value="反选">
<input type="button" id="btn4" value="选中所有奇数">
<input type="button" id="btn5" value="获得选中的所有值">

则分别实现相关功能的完整代码如下:


$(function({
	$('#btn1'.click(function({//全选
		$("[name='fruit']".attr('checked','true';
	};
	$('#btn2'.click(function({//全不选
		$("[name='fruit']".removeAttr('checked';
	};
	$('#btn3'.click(function({//反选
		$("[name='fruit']".each(function({
			if($(this.attr('checked'{
				$(this.removeAttr('checked';
			}else{
				$(this.attr('checked','true';
			}
		}
	};
	$("#btn4".click(function({//选中所有奇数
		$("[name='fruit']:even".attr('checked','true';
	}
	$("#btn5".click(function({//获取所有选中的选项的值
		var checkVal='';
		$("[name='fruit'][checked]".each(function({
			checkVal+=$(this.val(+',';
		}
		alert(checkVal;
	}
};

注意使用 jquery 之前必须要引入 jquery 包哦!

编程笔记 » jquery 实现全选,反选,全不选等功能

赞同 (72) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽