Jquery 小案例之表单选择器
效果图:
表单中的代码:
<input type="button" value="使单选下拉框的'选择3号'被选中"/>
<input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br>
<input type="button" value="使多选框的'多选2'和'多选4'被选中"/>
<input type="button" value="使单选框的'单选2'被选中"/><br>
<input type="button" value="打印已经被选中的值"><br>
<br/>
<select id="single">
<option value="sel01">选择1号</option>
<option value="sel02">选择2号</option>
<option value="sel03">选择3号</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px;">
<option value="mul01" selected="selected">选择1号</option>
<option value="mul02">选择2号</option>
<option value="mul03">选择3号</option>
<option value="mul04">选择4号</option>
<option value="mul05" selected="selected">选择5号</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>
JQuery代码:
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//使单选下拉框的'选择3号'被选中
$("input:first").click(function(){
$("#single option:last").attr("selected","selected");
//alert($("#single option:last").val())
});
//使多选下拉框选中的'选择2号'和'选择4号'被选中
$("input:eq(1)").click(function(){
$("#multiple").val(["mul02","mul04"]);
});
//alert($(":radio:eq(1)").val())
//使多选框的'多选2'和'多选4'被选中
$("input:eq(2)").click(function(){
//$(":checkbox:eq(1)").attr("checked",true);
//$(":checkbox:eq(3)").attr("checked",true);
$(":checkbox").val(["check2","check4"])
});
//使单选框的'单选2'被选中
$("input:eq(3)").click(function(){
//$(":radio:eq(1)").attr("checked",true);
$(":radio").val(["radio2"]);
});
//打印已经被选中的值
$("input:eq(4)").click(function(){
var $cc=$("select option:selected");
$cc.each(function(){
alert(this.innerText)
});
var $aa=$("input:checked");
$aa.each(function(){
alert(this.value)
});
});
});
</script>