js、jQuery 表单 - 那些事儿

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()，在 option 有 value 属性的情况下，结果是：2，

只有 option 不带 value 属性，结果才是：上海

$(this).val();
$(this).find("option:selected").val()
$("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;

document.getElementById("txtbox").onchange=function(){
	console.log( this.value);
}

5、input

待续...