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

jquery实现全选反选功能---兰

2015-03-29 14:18 441 查看
<div id="checkAndInverCheck">
<p style="text-align:center; padding-top:15px"> 选择喜欢的兰花品种:</br>
<input type="checkbox" value="蕙兰">蕙兰
<input type="checkbox" value="建兰">建兰</br>
<input type="checkbox" value="寒兰">寒兰
<input type="checkbox" value="墨兰">墨兰</br>
<input type="checkbox" value="春兰">春兰
<input type="checkbox" value="莲瓣兰">莲瓣兰

</div>
<p style="text-align:center; padding-top:15px">
<input type="button" value="全选" name="ay_check" id="ay_check_all"/>
<input type="button" value="反选" name="ay_check" id="ay_check_invert"/>
</p>

<script type="text/javascript">
//全选
$("input[name='ay_check']").bind("click",function(){
var btn_id = $(this).attr("id");
if(btn_id){
//点击全选按钮
if(btn_id == "ay_check_all"){
var inputs = $("#checkAndInverCheck input");
if(inputs.length == 0){
alert("div下没<input>元素,你想全选啥?");
}else{
for(var i in inputs){
inputs[i].checked=(inputs[i].checked)?"checked":"checked";
}
}
//点击反选按钮
}else if(btn_id == "ay_check_invert"){
var inputs = $("#checkAndInverCheck input");
if(inputs.length == 0){
alert("div下没<input>元素,你想反选啥?");
}else{
for(var i in inputs){
inputs[i].checked=(inputs[i].checked)?"":"checked";
}
} 
}else{
alert("wrong!!!");
}
}

});
//全选
function checkAll(){
var inputs = $("#checkAndInverCheck input");
if(inputs.length == 0){
alert("div下没<input>元素,你想全选啥?");
  }else{
for(var i in inputs){
inputs[i].checked=(inputs[i].checked)?"checked":"checked";
}
}
}

//反选
function invertCheck(){
var inputs = $("#checkAndInverCheck input");
if(inputs.length == 0){
alert("div下没<input>元素,你想反选啥?");
}else{
for(var i in inputs){
inputs[i].checked=(inputs[i].checked)?"":"checked";
}
} 
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: