<script type="text/javascript" src="../project/blogcms2/js/jquery.js" ></script>
<script>
$(function () {
    // 全选
    $('#hobby_all').click(function () {
        $('input[name="hobby[]"]').attr("checked",true);
    }) ;

    // 反选
    $('#hobby_anti_all').click(function () {
        $('input[name="hobby[]"]').attr("checked",false);
    }) ;

    // 全选
    $('#city_all').click(function () {
        $('input[name="city[]"]').attr("checked",true);
    }) ;

    // 反选
    $('#city_anti_all').click(function () {
        $('input[name="city[]"]').attr("checked",false);
    }) ;

    $('#submit').click(function () {

        // 获取多选框的值
        hobby = '<br>兴趣爱好: <br>' ;
        $('input[@name="hobby[]"]').each(function () {
            if ($(this).attr('checked') == true) {
                hobby += $(this).attr('value')+",<br>" ;
            }
        });

        // 获取多选框的值
        city = '<br><br>喜欢的城市: <br>' ;
        $('input[@name="city[]"]').each(function () {
            if ($(this).attr('checked') == true) {
                city += $(this).attr('value')+",<br>" ;
            }
        });

        // 获取下拉列表的值
        age = '<br><br>年龄: <br>' + $('#age').val() ;

        // 获取单选框的值
        sex = '<br><br>性别: <br>' + $('input[@type="radio"][@checked]').val() ;


        $('.content').html(hobby + city + age + sex) ;

    });

});
</script>

<style>
.fieldset{
    width: 200px;
}

</style>


<div class='test' id='checkbox'>

<form method="post" >
性别
<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女
<input type="radio" name="sex" value="null" />保密
<br />
<br />
年龄:
<select name="age" ></div>
</div>

<p>请自备jQuery的代码,并在本文的相应位置修改其路径与本地的对应即可!</p>
 

 

相关文章: