<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表单对象属性过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 记得引入jquery-1.11.3.js文件到js目录下 -->
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
body{
font-family: "Microsoft YaHei"
}
.cGreen{background-color: #4CA902}
.cPink{background-color: #ED4A9F}
.cBlue{background-color: #0092E7}
.cCyan{background-color: #01A6A2}
.cYellow{background-color: #DCA112}
.cRed{background-color: #B7103B}
.cPurple{background-color: #792F7C}
.cBlack{background-color: #110F10}
.hide{display: none;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
// :enabled选取可用的input
$("input:enabled").val("new value! ..测试"); // 对所有设置值！
});
$("#btn2").click(function(){
// :disabled 选取不可用
console.log( $("input:disabled").val() );
});
$("#btn3").click(function(){
/* 获取：所有选择的单选值
$(":radio[name='country']:checked").each(function(){// each遍历的都是dom对象！
console.log( $(this).val() );
});
// 多选框选中值，
$(":checkbox[name='language']:checked").each(function(){
console.log( $(this).val() );
});
*/
// 所有的单选、多选框选中值
$(":radio:checked,:checkbox:checked").each(function(){
console.log( $(this).val() );
});
});
$("#btn4").click(function(){
//设置 中国 被选中(单选)
// 如果是单/复选被选中，传入值只能传入字符串数组
$(":radio[name='country']").val(["chn"]); // 单选默认选中
$(":checkbox[name='language']").val(["Java","IOS"]);// 复选框 默认选中
});
$("#btn5").click(function(){
// 第一个select选中 编译原理
// 如果是下拉列表默认选中，传值可以是字符串、数组
//$("select:eq(0)").val("编译原理");
$("select:first").val(["编译原理"]);
});
$("#btn6").click(function(){
//第二个select选中 软件工程和数据库原理
$("select:last").val(["软件工程","数据库原理"]);
});
$("#btn7").click(function(){
// 选取：没有选中的单选、 多选
$(":radio:not(:checked),:checkbox:not(:checked)").each(function(){
console.log( $(this).val() );
});
});
$("#btn8").click(function(){
//选择： 所有选中的下拉列表
$("select option:selected").each(function(){
console.log($(this).val());
});
});
$("#btn9").click(function(){
//选择 下拉列表没有选中值
$("select option:not(:selected)").each(function(){
console.log($(this).val());
});
});
});
</script>
</head>
<body>
<input type="text" name="text1" value="可用单行文本输入框">
<input type="text" name="text2" value="不可用单行文本输入框" disabled="disabled">
<select>
<option>软件工程</option>
<option>编译原理</option>
<option>数据库原理</option>
</select>
<select multiple="multiple">
<option>软件工程</option>
<option>编译原理</option>
<option>数据库原理</option>
</select>
<br><br>
<input type="radio" name="country" value="chn">中国
<input type="radio" name="country" value="usa">美国
<input type="checkbox" name="language" value="Java">Java
<input type="checkbox" name="language" value="IOS">IOS
<input type="checkbox" name="language" value="Android">Android
<br><br>
<hr>
<input type="button" id="btn1" value=":enabled选取所有可用的单行文本input元素">
<input type="button" id="btn2" value=":disabled选取所有不可用的单行文本input元素">
<input type="button" id="btn3" value=":checked请先选择，然后选取所有被选中的单选、多选元素">
<input type="button" id="btn4" value="设置 中国 被选中">
<input type="button" id="btn5" value="设置第一个select选中 编译原理">
<input type="button" id="btn6" value="设置第二个select选中 软件工程和数据库原理">
<input type="button" id="btn7" value="选取所有没有被选中的单选、多选元素">
<input type="button" id="btn8" value=":selected选取所有被选中的select下拉列表的option选项元素">
<input type="button" id="btn9" value="选择 下拉列表没有选中值">
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-1299249.html
