jQuery之checkbox相关操作

例子：

<!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.min.js">
</script>
</head>

<body>
<input type="checkbox" id="aa"  />全选<br />
<input type="checkbox" class="bb" value="1"  />方式一
<input type="checkbox" class="bb"  value="2" />方式二
<input type="checkbox" class="bb"  value="3" />方式三
<input type="checkbox" class="bb"  value="4"/>方式四

<input type="button" value="取值" id="cc" /><br />
<input type="text" id="BB" />
<input type="button" value="选中" id="dd" />

</body>
</html>

一：选中某个checkbox，点击取值按钮，获取checkbox的value值

<script>
    $("#cc").click(function () //取checkbox中的值
    {
        var xx = $(".bb");
        for(var i = 0;i<xx.length;i++)
        {
            if(xx.eq(i).prop("checked"))//也可以用xx.eq(i)[0].checked
            {
                alert(xx.eq(i).val());
            }
        }
    });
</script>

二：在文本框中输入某个checkbox的value值，点击选中，实现某个checkbox被选中

<script>
    $("#dd").click(function () //设置某项选中
    {
        var input = $("#BB").val();
        var xx = $(".bb");
        xx.prop("checked",false);
        for(var i = 0;i<xx.length;i++)
        {
            if(xx.eq(i).val()==input)
            {
                xx.eq(i).prop("checked",true);
            }
        }
    })
</script>

posted @ 2016-05-14 10:49 天照丶鼬阅读(158) 评论(0) 编辑收藏举报

天照丶鼬

jQuery之checkbox相关操作

公告