【JQuery】操作前端控件知识笔记

一、jQuery操作复选框checkbox

1、设置选中、取消选中、获取被选中的值、判断是否选中等

 注意&＃xff1a;操作checked、disabled、selected属性&＃xff0c;强制建议只用prop()方法&＃xff01;&＃xff01;&＃xff0c;不要用attr()方法。

attr()是jQuery 1.0版本就有的函数&＃xff0c;prop()是jQuery 1.6版本新增的函数。毫无疑问&＃xff0c;在1.6之前&＃xff0c;你只能使用attr()函数&＃xff1b;1.6及以后版本&＃xff0c;你可以根据实际需要选择对应的函数。

&＃xff08;锋利的jQuery第二版&＃xff0c;第149页&＃xff09;

参考&＃xff1a;jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

 2、获得checkbox里选中的多个值

利用name属性值获取checkbox对象&＃xff0c;然后循环判断checked属性&＃xff08;true表示被选中&＃xff0c;false表示未选中&＃xff09;

<input type&＃61;"checkbox" name&＃61;"test" value&＃61;"1"/><span>1span>
<input type&＃61;"checkbox" name&＃61;"test" value&＃61;"2"/><span>2span>
<input type&＃61;"checkbox" name&＃61;"test" value&＃61;"3"/><span>3span>
<input type&＃61;"checkbox" name&＃61;"test" value&＃61;"4"/><span>4span>
<input type&＃61;"checkbox" name&＃61;"test" value&＃61;"5"/><span>5span>
<input type&＃61;&＃39;button&＃39; value&＃61;&＃39;提交&＃39; onclick&＃61;"fun()"/>function fun(){obj &＃61; document.getElementsByName("test");check_val &＃61; [];for(k in obj){if(obj[k].checked)check_val.push(obj[k].value);}alert(check_val);
}

View Code

或者采用jquery去获取class&＃xff0c;同样遍历去取值。 

二、jQuery操作按钮button

　　禁用、启用以及样式等

• 禁止使用button

1.直接写在标签里面  

<button id&＃61;"btn" disabled&＃61;"disabled">设置按钮不可以点击button>

2.js禁用button 

document.getElementById("btn").disabled&＃61;true;

3.使用jquery禁用button  

$("#btn").prop(&＃39;disabled&＃39;,&＃39;disabled&＃39;);

• 设置禁用之后启用button

$("#btn").removeAttr("disabled");$("#btn").attr(&＃39;disabled&＃39;,&＃39;&＃39;);

更多&＃xff1a;jquery禁用、启用button以及button的样式操作