您的位置：首页 > Web前端 > JQuery

jquery中 如何设置和取得 radio， checkbox， select， multiple select 的值

2012-02-08 15:46 666 查看
20120808 于新城科技园

jquery中 如何设置和取得 radio， checkbox， select， multiple的select 的值，稍微整理了一下。 先放在这里，以后如果有更深刻的认识，再来维护此文章。

注意引用一个jquery的包。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>radio，checkbox，select的使用</title>
    <script src="./js/jquery-1.6.2.js"></script>
    <script>
        $(document).ready(function () {
            
            // 屏蔽浏览器表单默认的记忆功能
            $('input').attr("autocomplete", "off");
            
            // radio设置默认值
            $('input:radio[id=rd2]').attr("checked","checked");
            // checkbox设置默认值
            $('input:checkbox[id=ch2]').attr("checked","checked");
            $('input:checkbox[id=ch3]').attr("checked","checked");
            // select设置默认值
            $('#weekSelect').val("2");
            // multiple的select设置默认值
            $('#studentSelect').val(["2","3"]);
            
            // 取值
            $('#submitBtn').click(function () {
                // radio选中的内容
                alert($('input:radio[name=color]:checked').val());
                // checkbox选中的内容
                $('input:checkbox[name=size]:checked').each( function() {
                      alert($(this).val());
                });
                // select选中的内容
                alert($('#weekSelect').val() + "," + $('#weekSelect option[value="'+$('#weekSelect').val()+'"]').text());
                // multiple的select选中的内容
                var student = $("#studentSelect").val();
                for(var key in student){
                  alert(student[key] + "," + $('#studentSelect option[value="'+student[key]+'"]').text());
                }    
            });
        });                
    </script>
</head>

<body>
     <div id="colorRadio">
	    <input type="radio" name="color" id="rd1" value="Red" />Red
	    <input type="radio" name="color" id="rd2" value="Yellow"/>Yellow
	    <input type="radio" name="color" id="rd3" value="Blue" />Blue
	</div>
	<br>
	<div id="sizeCheck">
	    <input type="checkbox" name="size" id="ch1" value="10 pt"/>10 pt
	    <input type="checkbox" name="size" id="ch2" value="12 pt" />12 pt
	    <input type="checkbox" name="size" id="ch3" value="14 pt" />14 pt
	</div>
	<br>
	<div>
	<select id="weekSelect">
	    <option value="1">星期一</option>
	    <option value="2">星期二</option>
	    <option value="3">星期三</option>
	    <option value="4">星期四</option>
	    <option value="5">星期五</option>
	    <option value="6">星期六</option>
	    <option value="7">星期日</option>
	</select>
	</div>
	<br>
	<div>
	<select id="studentSelect" multiple="multiple" >
	    <option value="1">张三</option>
	    <option value="2">李四</option>
	    <option value="3">王五</option>
	</select>
	</div>
	<input type="button" id="submitBtn" value="Get Value" />
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航