经常使用表单操做

时间 2019-12-06

标签经常使用表单栏目 HTML 繁體版

原文原文链接

1、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的值：

一、JavaScript原生的方法javascript

(1)拿到select对象： css

var myselect=document.getElementById(“test”);

(2)拿到选中项的索引：html

var index=myselect.selectedIndex ; // selectedIndex表明的是你所选中项的index

(3)拿到选中项options的value： java

myselect.options[index].value;

(4)拿到选中项options的text： jquery

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>

二、jQuery方法（前提是已经加载了jquery库）app

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中的全部值：

一、JavaScript原生的方法：ui

<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>

二、jQuery方法（前提是已经加载了jquery库）this

<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中：url

<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>-->

代码中：spa

<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>

2、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" />radio3

var value = "2"; $(":radio[name='group1'][value='" + value + "']").prop("checked", "checked");

3、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>