常用表单操作
一、select：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="select" value="B" class="select" name="selectName">
<!--<option selected value="">请选择</option>-->
<option value="A" url="http://www.baidu.com">第一个option</option>
<option value="B" url="http://www.qq.com">第二个option</option>
<!--<option value="B" url="http://www.qq.com" selected = "selected">第二个option</option>-->
</select>
<select class="select" value="B" name="selectName">
<!--<option selected value="">请选择</option>-->
<option value="C" url="http://www.163.com">第三个option</option>
<option value="D" url="http://www.tmall.com">第四个option</option>
<!--<option value="B" url="http://www.qq.com" selected = "selected">第二个option</option>-->
</select>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
//$("#select").val("B");//设置默认值
//$("#select option:first").prop("selected", 'selected');//默认选中第一项
$("#select").change(function(){
var options=$("#select option:selected"); //获取选中的项
console.log(options.val()); //拿到选中项的值
console.log(options.text()); //拿到选中项的文本
console.log(options.attr('url')); //拿到选中项的url值
if(options.val()==''){
alert('为空');
return;
}
}); //为Select添加事件，当选择其中一项时触发
</script>
</body>
</html>
如何获得select当前被选中option的值：
1、JavaScript原生的方法
(1)拿到select对象：
var myselect=document.getElementById(“test”);(2)拿到选中项的索引：
var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index(3)拿到选中项options的value：
myselect.options[index].value;(4)拿到选中项options的text：
myselect.options[index].text;<select id="example" name="selectName">
<option value='1' id="a">项目1</option>
<option value='2' id="b">项目2</option>
<option value='3' id="c">项目3</option>
<option value='4' id="d">项目4</option>
<option value='5' id="e">项目5</option>
</select>
<script type=text/javascript>
document.getElementById("example").onchange = function(){
console.log(this.options[this.selectedIndex].value);
}
</script>2、jQuery方法（前提是已经加载了jquery库）
var options=$(“#test option:selected”); //获取选中的项
alert(options.val()); //拿到选中项的值
alert(options.text()); //拿到选中项的文本<select id="example" name="selectName">
<option value='1' id="a">项目1</option>
<option value='2' id="b">项目2</option>
<option value='3' id="c">项目3</option>
<option value='4' id="d">项目4</option>
<option value='5' id="e">项目5</option>
</select>
<script type=text/javascript>
$("#example").change(function(){
console.log($("#example option:selected").val());
})
</script>如何获取select中的所有值：
1、JavaScript原生的方法：
<select id="example">
<option value='1' id="a">项目1</option>
<option value='2' id="b">项目2</option>
<option value='3' id="c">项目3</option>
<option value='4' id="d">项目4</option>
<option value='5' id="e">项目5</option>
</select>
<script type=text/javascript>
var example = document.getElementById("example");
var len = example.options.length;
for(var i = 0; i<len; i++){
console.log(example.options[i].text);
}
</script>2、jQuery方法（前提是已经加载了jquery库）
<select id="example" name="selectName">
<option value='1' id="a">项目1</option>
<option value='2' id="b">项目2</option>
<option value='3' id="c">项目3</option>
<option value='4' id="d">项目4</option>
<option value='5' id="e">项目5</option>
</select>
<script type=text/javascript>
$("#example option").each(function(){
console.log($(this).val());
});
</script>设置某项默认被选中：
html中：
<option selected value="">请选择</option>
<option value="A" url="http://www.baidu.com">第一个option</option>
<option value="B" url="http://www.qq.com">第二个option</option>
<!--<option value="B" url="http://www.qq.com" selected = "selected">第二个option</option>-->代码中：
<select id="example" name="selectName">
<option value='1' id="a">项目1</option>
<option value='2' id="b">项目2</option>
<option value='3' id="c">项目3</option>
<option value='4' id="d">项目4</option>
<option value='5' id="e">项目5</option>
</select>
<script type=text/javascript>
$("#example").val(1);
//document.getElementById("example").value = 3;
//$("#select option:first").prop("selected", 'selected');//默认选中第一项
</script>二、radio：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label><input type="radio" name="sex" value="m" checked>男</label><!-- 设置默认选中 -->
<label><input type="radio" name="sex" value="f">女</label>
<button onclick="getSelectValue()">get Select</button>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
//第三方按钮点击
function getSelectValue(){
var val = $('input[name="sex"]:checked').val();
alert("选中的radio的值是：" + val);
}
//自身值改变
$('input[type=radio][name=sex]').change(function() {
if (this.value == 'm') {
alert("我是男性！");
}
else if (this.value == 'f') {
alert("我是女性！");
}
});
//点击自身
$('input[type=radio][name=sex]').click(function() {
if ($(this).is(':checked')) {
alert($(this).val() + '被选中！');
}
if (this.value == 'm') {
alert("我是男性！");
}
else if (this.value == 'f') {
alert("我是女性！");
}
});
</script>
</body>
</html>根据值选中radio组中某一项：
<input type="radio" value="1" checked="checked" name="group1" />radio1
<input type="radio" value="2" name="group1" />radio2
<input type="radio" value="3" name="group1" />radio3var value = "2";
$(":radio[name='group1'][value='" + value + "']").prop("checked", "checked"); 三、checkbox：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input class="subject" name='subject' type="checkbox" value="Chinese" id="Chinese" /><label>语文</label>
<input class="subject" name='subject' type="checkbox" checked value="Math" id="Math"/><label>数学</label>
<input class="subject" name='subject' type="checkbox" checked="checked" value="English"/><label>英语</label>
<input class="subject" name='subject' type="checkbox" value="Sport"/><label>体育</label>
<button id="button1">get Select</button>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
//判断checkbox 是否选中
alert($("#Math").is(":checked"));//选中，返回true，没选中，返回false
//设置checkbox为选中状态
$("#Chinese").prop("checked",true);
//设置checkbox为不选中状态
$("#id").prop("checked",false);
$(".subject").click(function(){
if($(this).is(":checked")){
alert($(this).val() + '被选中了');
}
});
//获取选中项的值
$("#button1").click(function(){
//$('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked')
//意思是选择被选中的checkbox
$.each($('.subject:checked'),function(){
alert("你选了："+
$('.subject:checked').length+"个，其中有："+$(this).val());
});
});
</script>
</body>
</html>
