当前位置: 代码迷 >> Web前端 >> JQuery兑现checkbox的全/不全选,以及反选功能
  详细解决方案

JQuery兑现checkbox的全/不全选,以及反选功能

热度:85   发布时间:2012-10-07 17:28:51.0
JQuery实现checkbox的全/不全选,以及反选功能

?第一步:编写前端页面test.html,JQuery核心文件jquery.js见附件

<head>
? <title>JQuery实现checkbox的全/不全选,以及反选功能</title>
? <meta name="Generator" content="EditPlus">
? <meta name="Author" content="">
? <meta name="Keywords" content="">
? <meta name="Description" content="">
? <script type="text/javascript" src="jquery.js"></script>
? <script type="text/javascript" src="text.js"></script>

?</head>

?<body>
?<input type="button" id="sel" value="全选" />
?<input type="button" id="dissel" value="反选" />
?<input type="checkbox" value="1" />CheckBox1
?<input type="checkbox" value="2" />CheckBox2
?<input type="checkbox" value="3" />CheckBox3
?<input type="checkbox" value="4" />CheckBox4
?</body>
</html>

第二步:编写text.js文件

$(function(){
?var checkboxs = $("input[type='checkbox']");
?var flag = true;
?$("#sel").click(function(){
??if($("#sel").val()=="不全选"){
???$("#sel").val("全选");
???flag = false;
??}else{
???$("#sel").val("不全选");
???flag = true;
??}
??checkboxs.each(function(){
???flag?$(this).attr("checked",true):$(this).removeAttr("checked");
??});
?});
?$("#dissel").click(function(){
??checkboxs.each(function(){
???$(this).attr("checked")?$(this).removeAttr("checked"):$(this).attr("checked",true);
??});
?});
});

  相关解决方案