jQuery 对checkbox的操作

WEB前端 waitig 412℃ 百度已收录 0评论
<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery 对checkbox的操作</title>
</HEAD>
<body>

<div style="border: 1px solid #999; width: 500px; padding: 15px; background: #eee; margin-top: 150px;">
    <form name="form1" method="post" action="">
        <input type="button" id="btn1" value="全选">
        <input type="button" id="btn2" value="取消全选">
        <input type="button" id="btn3" value="选中所有奇数">
        <input type="button" id="btn4" value="反选">
        <input type="button" id="btn5" value="获得选中的所有值">
        <br /><br />
        <input type="checkbox" name="checkbox" value="checkbox1">
        checkbox1
        <input type="checkbox" name="checkbox" value="checkbox2">
        checkbox2
        <input type="checkbox" name="checkbox" value="checkbox3">
        checkbox3
        <br/>
        <input type="checkbox" name="checkbox" value="checkbox4">
        checkbox4
        <input type="checkbox" name="checkbox" value="checkbox5">
        checkbox5
        <input type="checkbox" name="checkbox" value="checkbox6">
        checkbox6
    </form>
</div>
<br/><br/><br/>
<div>
    <input type="checkbox" name="test" value="0" />0
    <input type="checkbox" name="test" value="1" />1
    <input type="checkbox" name="test" value="2" />2
    <input type="checkbox" name="test" value="3" />3
    <input type="checkbox" name="test" value="4" />4
    <input type="checkbox" name="test" value="5" />5
    <input type="checkbox" name="test" value="6" />6
    <input type="checkbox" name="test" value="7" />7
    <input type="button" onclick="jqchk()" value="提 交" />
</div>


<script type="text/javascript" src="./jquery-1.9.1.js"></script>
<SCRIPT LANGUAGE="JavaScript">

    $("document").ready(function(){
        $("#btn1").click(function(){
            $("[name='checkbox']").attr("checked",'true');//全选
        })
        $("#btn2").click(function(){
            $("[name='checkbox']").removeAttr("checked");//取消全选
        })
        $("#btn3").click(function(){
            $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
        })
        $("#btn4").click(function(){
            $("[name='checkbox']").each(function(){//反选
                if($(this).attr("checked")){
                    $(this).removeAttr("checked");
                }
                else{
                    $(this).attr("checked",'true');
                }
            })
        })
        $("#btn5").click(function(){//输出选中的值
            var str="";
            $("[name='checkbox'][checked]").each(function(){
                str+=$(this).val()+"/r/n";
                //alert($(this).val());
            })
            alert(str);
        })
    })


    function chk(){ //js获取复选框值
        var obj=document.getElementsByName('test'); //选择所有name="'test'"的对象,返回数组
        //取到对象数组后,我们来循环检测它是不是被选中
        var s='';
        for(var i=0; i<obj.length; i++){
            if(obj[i].checked)
                s+=obj[i].value+','; //如果选中,将value添加到变量s中
        }
        //那么现在来检测s的值就知道选中的复选框的值了
        alert(s==''?'你还没有选择任何内容!':s);
    }
    function jqchk(){ //jquery获取复选框值
        var chk_value =[];
        $('input[name="test"]:checked').each(function(){
            chk_value.push($(this).val());
        });
        alert(chk_value.length==0 ?'你还没有选择任何内容!':chk_value);
    }

</SCRIPT>
</body>
</HTML>

本文由【waitig】发表在等英博客
本文固定链接:jQuery 对checkbox的操作
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)