全选,反选,全不选

全选,反选,全不选

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全选,反选,全不选</title>
<head></head>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(function(){
        $("#CheckedAll").click(function(){
            if(this.checked){
                $(‘input[type=checkbox][name=items]‘).attr("checked",true);
            }else{
                $(‘input[type=checkbox][name=items]‘).attr("checked",false);
            }

        });
        $(‘input[type=checkbox][name=items]‘).click(function(){
            var flag=true;
            $(‘input[type=checkbox][name=items]‘).each(function(){
                if(!this.checked){
                    flag=false;
                }
            });
            if(flag){
                $(‘#CheckedAll‘).attr(‘checked‘,true);
            }else{
                $(‘#CheckedAll‘).attr(‘checked‘,false);
            }

        })
        $("#send").click(function(){
            var str = "你选中的爱好:\r\n";
            $(‘input[type=checkbox][name=items]:checked‘).each(function(){
                str+=$(this).val()+‘\r\n‘;
            });
            alert(str);
        });
    });
</script>
<body>

<form>
   你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
    <input type="button" id="send" value="提 交"/>
</form>

</body>
</html>

全选,反选,全不选

时间: 2024-11-02 16:42:36

全选,反选,全不选的相关文章

表单javascript checkbox全选 反选 全不选

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>javascript checkbox全选 反选 全不选</title> <meta name="des

【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" /> <script type=&qu

checkbook全选/反选/全不选

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><ul id="list"> <li><label><input type="checkbox"

js实现全选,反选,全不选

思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设为true选中状态. js代码 <script> window.onload=function(){ var CheckAll=document.getElementB

复选框的 全选 反选 全不选

//全选 $("#btn1").click(function(){ $("input[name='FORM_COLUMNS']").prop("checked",true); }); //取消全选 $("#btn2").click(function(){ $("input[name='FORM_COLUMNS']").prop("checked",false); }); //反选 $(&

表单全选反选全不选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>请输入关键词</title> <script type="text/javascript" src="js/jquery.min.js"></script> </head><bod

jQuery如何实现复选框全选和全不选

jQuery如何实现复选框全选和全不选: 在网页中经常有复选框的全选和全不选效果,比如在后台新闻管理.用户空间信息管理等都有用到,下面就提供一个jQuery实现的此效果.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

jQuery复选框全选全不选代码

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>jQuery复选框全选全不选代码<

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

html+css+js实现复选框全选与反选

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu