jquery练习

复选框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>//引用jquery包
</head>

<body>
<input type="checkbox" id="all" />全选<br />
<input class="x" type="checkbox" value="one" />aa
<input class="x" type="checkbox" value="two" />bb
<input class="x" type="checkbox" value="three"/>cc
<input class="x" type="checkbox" value="four" />dd
<input class="x" type="checkbox" value="five" />ee
<input type="button" value="测试" id="bt"/>
<input type="text" id="tx" />
<input type="button" value="设置选中" id="sz" />

</body>
<script type="text/javascript">
$(document).ready(function(e) {//写JQUERY代码在外层需要先加这么一句，类似一个范围要在这个范围里写代码，function（e）这里称呼为匿名函数；
    
    $("#all").click(function(){//click等同于js中的on click(),但是比较而言这个更为简洁实用
        var ck=$(".x")//根据class选择
        var xz=$(this)[0].checked;//$(this)代表jquery元素后面加[0]转化为了dom元素
        ck.prop("checked",xz); //复选框checked在jquery中存在bug，所以用prop()替代              
        })
        
    $("#bt").click(function(){
        var ck=$(".x");
        for(var i=0;i<ck.length;i++)
        {  
            if(ck.eq(i)[0].checked)
            {
              alert(ck.eq(i).val());
            }
        }    
        })
    $("#sz").click(function(){//这个没有运行出来查了几遍也没发现问题，明天问同学吧
        
        var v = $("#tx").val();    
        var ck = $(".x");
        ck.prop("checked",false);
        for(var i=0;i<ck.length;i++)
        {
            if(ck.eq(i).val()==v)
            {
                ck.eq(i).prop("checked",true);
            }
        }
        
        })
        
    
    
});


</script>
</html>
练习