您的位置:首页 > Web前端 > JQuery

Jquery(2.1) 对checkbox的操作(全选,反选,单个操作)

2015-07-31 14:15 597 查看
<script src="<%=basePath%>/jquery/jquery-2.1.4.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

//select all or remove all

$("#chkItemAll").bind("click", function () {

var ifChecked = document.getElementById("chkItemAll").checked;

var selectedId ="";

if(ifChecked){

$("[name = chkItem]:checkbox").each(function () {

this.checked = true;

if($(this).attr("value") != ""){

if(selectedId == ""){

selectedId = $(this).attr("value");

}else{

selectedId = selectedId+","+$(this).attr("value");

}

}

});

$('#showValue').attr("value",selectedId);

}else{

$("[name = chkItem]:checkbox").each(function () {

this.checked = false;

});

$('#showValue').attr("value","");

}

});

//Click the sub box ,change the selected value.

$("[name=chkItem]:checkbox").bind("click",function(){

$('#chkItemAll').attr("checked",false);

$(this).checked = false;

var selectedId = "";

$("[name=chkItem]:checkbox").each(function(){

if(this.checked){

if($(this).attr("value") != ""){

if(selectedId == ""){

selectedId = $(this).attr("value");

}else{

selectedId = selectedId+","+$(this).attr("value");

}

}

}

});

$('#showValue').attr("value",selectedId);

});

});

</script>

<div>

<input name="chkItem1" type="checkbox" id="chkItemAll" value="" /><br>

<input name="chkItem" type="checkbox" value="A" />

<input name="chkItem" type="checkbox" value="B" />

<input name="chkItem" type="checkbox" value="C" />

<input name="chkItem" type="checkbox" value="D" />

<input name="chkItem" type="checkbox" value="E" />

<input name="chkItem" type="checkbox" value="F" />

<input name="chkItem" type="checkbox" value="G" />

<input type="text" id="showValue" value=""/>

</div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: