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

jQuery选中多选框和单选框和下拉框

2013-07-30 16:55 239 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script language="JavaScript" src="../js/jquery-1.10.2.js"></script>
</head>
<body>
<input type="button" value="使单选下拉框的'2号'被选中"/><br>
<input type="button" value="使多选下拉框选中的'2号'和'5号'被选中"/><br>
<input type="button" value="使复选框的'复选2'和'复选4'被选中"/><br>
<input type="button" value="使单选框的'单选2'被选中"/><br>
<input type="button" value="打印已经被选中的值"><br>
<br/>

<select id="one">
<option>1号</option>
<option>2号</option>
<option>3号</option>
</select>

<select id="many" multiple="multiple" style="height:120px;">
<option selected="selected">1号</option>
<option>2号</option>
<option>3号</option>
<option>4号</option>
<option>5号</option>
<option selected="selected">6号</option>
</select>

<br/>
<br/>
<input type="checkbox" name="c" value="check1"/> 复选1
<input type="checkbox" name="c" value="check2"/> 复选2
<input type="checkbox" name="c" value="check3"/> 复选3
<input type="checkbox" name="c" value="check4"/> 复选4
<br/>
<input type="radio" name="r" value="radio1"/> 单选1
<input type="radio" name="r"  value="radio2"/> 单选2
<input type="radio" name="r"  value="radio3"/> 单选3
</body>
<script language="JavaScript">
//<input type="button" value="使单选下拉框的'2号'被选中"/><br>
$("input:eq(0)").click(function(){
$("#one").val("2号");
});
//<input type="button" value="使多选下拉框选中的'2号'和'5号'被选中"/><br>
$("input:eq(1)").click(function(){
$("#many").val(["2号","5号"]);
});
//<input type="button" value="使复选框的'复选2'和'复选4'被选中"/><br>
$("input:eq(2)").click(function(){
$("input[name=c]").val(["check2","check4"]);
});
//<input type="button" value="使单选框的'单选2'被选中"/><br>
$("input:eq(3)").click(function(){
$("input[name=r]").val(["radio2"]);
});
//<input type="button" value="打印已经被选中的值"><br>
$("input:eq(4)").click(function(){
$("select option:selected").each(function(index,domEle){
alert($(domEle).text());
});
$("input:checked").each(function(index,domEle){
alert($(domEle).val());
});
});
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航