- 1,select
- <select>
- <option value="1" selected="selected"> 北京 </option>
- <option value="2"> 上海 </option>
- <option value="3"> 深圳 </option>
- <option value="4"> 广州 </option>
- </select>
1.1, 添加 | 删除子项
- $("select").prepend("<option value='0'> 香港 </option>");
- $("select").append("<option value='5'> 武汉 </option>");
- $("select option[value='4']").remove();
1.2, 改变选中项:
将选中项, 由 第 1 项北京, 改为 第 2 项上海
- $("select option").attr("selected",null).eq(1).attr("selected",true);
- // 或:
- $("select option").attr("selected",null).end().find("[value=2]").attr("selected",true);
更简单:
$("select").attr("selected",null).val(2);
同时, 上面范例中的 attr , 均可替换成 prop
$("select").prop("selected",null).val(2);
1.3, 获取选中项的值
- $("select").change(function(){
- $(this).find("option:selected").text();
- // 或:$(this).find("option:selected").html()
- })
但取值不能用 val(),val 取的是属性 value, 结果是: 2
- $("select option:selected").val();
- JS:
- var index = slt.selectedIndex;
添加 删除:
- slt.options.add(new Option("香港","0"),slt.options[0]); // 前置
- slt.options.add(new Option("武汉","5"));
- slt.options.remove(1); // 数字是, 删除的索引值
改变选中项, 改为上海 :
slt.options[index].text="上海"
获取内容改变时的值 :
var slt= document.getElementsByTagName("select")[0];
假如选取上海
- slt.onchange = function(){
- var index = slt.selectedIndex;
- console.log(this.value); //2
- console.log(this.options[index].text); // 上海
- // 或: this.options[index].innerText; this.options[index].innerHTML
- }
2, 单选框
<div id="form1">
<input type="radio" name="sex" value="male">male
<input type="radio" name="sex" value="female">female
</div>
选中某一项
$("#form1 input[value=female]").prop("checked",true);
取消选中
$("#form1 input").prop("checked",false);//null,false,""$("#form1 input:checked").prop("checked",false);//null,false,""
取值:
$("#form1 input:checked").prop("value")
prop 可替换成 attr
- JS
- var ipts = document.getElementById("form1").getElementsByTagName("input");
- for (var i = 0;i <ipts.length; i++) {
- // 选中某一项
- ipts[i].value === "female" && (ipts[i].checked = true);
- // 取消选中
- ipts[i].checked && (ipts[i].checked = false);
- // 取值
- ipts[i].checked && console.log(ipts[i].value);// 或: ipts[i].getAttribute("value")
- }
3, 复选框
- <div id="form1">
- <input type="checkbox" name="city" value="北京"/> 北京
- <input type="checkbox" name="city" value="上海"/> 上海
- <input type="checkbox" name="city" value="深圳"/> 深圳
- <input type="checkbox" name="city" value="广州"/> 广州
- </div>
- <div>
- <input type="button" id="btn1" value="全选">
- <input type="button" id="btn2" value="全不选">
- <input type="button" id="btn3" value="反选">
- <input type="button" id="btn4" value="获取选中值">
- </div>
取 checkbox
var ipts = $("#form1 input[type=checkbox]");
这里无需判断 input 类型, 权当多个笔记!
- var ipts = document.getElementById("form1").getElementsByTagName("input");
- for (var i = 0; i < ipts.length; i++) {
- if(ipts[i].type === "checkbox"){ //ipts.[i].getAttribute("type") == "checkbox"
- console.log(ipts[i]);
- }
- }
3.1, 全选:
- $("#btn1").click(function(){
- ipts.prop("checked",true); // 或: ipts.each(function(){ this.checked = true })
- });
3.2, 全不选
- $("#btn2").click(function(){
- ipts.prop("checked",null);
- });
3.3, 反选选择
- $("#btn3").click(function(){
- ipts.each(function(){
- $(this).prop("checked",$(this).prop("checked")?false:true)
- });
- });
3.4, 获取选中的值
- $("#btn4").click(function(){
- var res="";
- ipts.each(function(i){
- $(this).prop("checked") && (res+= $(this).val());
- });
- console.log(res);
- })
- JS:
- var ipts = document.getElementById("form1").getElementsByTagName("input");
- function handleChkbox(obj){
- document.getElementById(obj).onclick = function(){
- var res ="";
- for (var i = 0;i < ipts.length; i++) {
- switch(this.value){
- case "全选":
- ipts[i].checked = true;
- break;
- case "全不选":
- ipts[i].checked = false;
- break;
- case "反选":
- ipts[i].checked = ipts[i].checked?false:true;
- break;
- default:
- ipts[i].checked && (res += ipts[i].value);
- }
- }
- console.log(res);
- }
- }
- handleChkbox("btn1");
- handleChkbox("btn2");
- handleChkbox("btn3");
- handleChkbox("btn4");
- 4,textarea
4.1 赋值
$("#txtbox").val($("#form1").prop("outerHTML"));
jQuery, attr 赋值无效:
4.2, 取值
- $("#txtbox").change(function(){
- console.log($(this).val()); // 或:(this).prop("value")
- })
jQuery,attr 取不到值: console.log($(this).attr("value"));
- JS:
- document.getElementById("txtbox").value = document.getElementById("form1").outerHTML;
- $("#txtbox").val($("#form1").attr("outerHTML"));
- document.getElementById("txtbox").onchange=function(){
- console.log( this.value);
- }
- 5,input
待续...
来源: http://www.qdfuns.com/article/25669/d323709a4182cd8dc92a9b2863391bd6.html