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

<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";
        }
    } 
} 
时间: 2024-11-08 11:44:13

jquery实现全选反选功能---兰的相关文章

jquery 书写全选反选功能

书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选反选插件</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/

jquery实现全选/反选功能

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多选框全选/反选</title> <script src="http://res01.xesimg.com/jquery/jquery.min.js">&l

jQuery实现全选反选功能

废话不说,直接上代码! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <title>Insert titl

JQuery实现列表中复选框全选反选功能封装

JQuery实现列表中复选框全选反选功能封装 我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了),然后想到之前老大有写过这个功能去看下他怎么写的,真是没有对比就没有伤害啊,这才叫封装: 1 $(':checkbox[data-check-target]').click(function () { 2

JS 全选反选功能

全选按钮:<input type=\"checkbox\" id=\"cheSelectAll\" />选择</li>"); 选择项:<input name=\"chkItem\" type=\"checkbox\" value=\"" + this.ID + "\" /> //全选反选 $("#cheSelectAll"

jQuery实现全选/反选和批量删除

//全选/全不选 $(function(){ //初始化时候,删除按钮隐藏 $("input[name='Delete'").css("display",'none'); $("#CheckAll").bind("click",function(){ $("input[name='Check[]']").prop("checked",this.checked); //显示删除按钮 if(

全选反选功能函数

//全选功能的函数 function selectAll(obj, chk) { if (chk == null) chk = 'chk_list'; var elems = obj.form.getElementsByTagName("INPUT"); if (obj.checked == true) { for (var i = 0; i < elems.length; i++) { if (elems[i].name == chk) elems[i].checked = t

js实现全选反选功能

开始慢慢地学习js&jQuery. function clicked(){ var arr=document.getElementsByName("product"); for(var i=0;i<arr.length;i++) { arr[i].checked=document.getElementById("all").checked; } } 出现问题如下: 1.getElementsByName开始被写成getElementByName,注意少

新版本的jquery checkbox 全选反选代码只能执行一遍,第二次就失败

$("#all_check").click(function() { $("input[name='checkShop[]']").attr("checked",this.checked); }); var $subBox = $("input[name='checkShop[]']"); $subBox.click(function(){ $("#all_check").attr("checke