码迷,mamicode.com
首页 > Web开发 > 详细

jquery练习

时间:2016-05-16 00:00:35      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:

复选框

<!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>

 

练习

jquery练习

标签:

原文地址:http://www.cnblogs.com/nannan-0305/p/5496538.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!