使用 Jquery 选中获取 checkbox radio 和 select的 value 和 text

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#all").change(function(){
                if(!$(this).is(":checked")){
                    $("input[name='aihao']").attr("checked",false);
                }else{
                    $("input[name='aihao']").attr("checked",true);
                }
            });
            $("#noall").click(function(){
                if($(this).is(":checked")){
                    $("input[name='aihao']").attr("checked",false);
                }
            });
            $("#fan").click(function(){
                if($(this).is(':checked')){
                    $("input[name='aihao']").each(function(){
                        if($(this).is(':checked')){
                            $(this).attr('checked',false);
                        }else{
                            $(this).attr('checked',true);
                        }
                    });
                }
            });
            $("#select").change(function(){
                alert($(this).val() + ' + ' + $(this).find('option:selected').text());
            });
            $("input[name='gender']").change(function(){
                $(this).siblings().attr('disabled',true)
            });
        });
    </script>
</head>
<body>
    <div id="main">
        <input type="checkbox" name="aihao" id="ckb1" />爬山
        <input type="checkbox" name="aihao" id="ckb2" />听音乐
        <input type="checkbox" name="aihao" id="ckb3" />看电影
        <input type="checkbox" name="aihao" id="ckb4" />看书
        <input type="checkbox" name="aihao" id="ckb5" />玩游戏
        <br />
        <input type="checkbox" name="all" id="all" />全选
        <input type="checkbox" name="noall" id="noall" />全不选
        <input type="checkbox" name="fan" id="fan" />反选
        <br />
        <hr />
        <br />
        <select name="" id="select">
            <option value="1">中国</option>
            <option value="2">俄罗斯</option>
            <option value="3">巴基斯坦</option>
            <option value="4">古巴</option>
            <option value="5">朝鲜</option>
        </select>
        <br />
        <input type="radio" name="gender" id="male" value="male" checked="checked" />男
        <input type="radio" name="gender" id="female" value="female" />女
        <input type="radio" name="gender" id="other" value="other" />其他
    </div>
</body>
</html>

posted on 2014-01-13 16:23  liangshanbo  阅读(210)  评论(0)    收藏  举报

导航