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

一、jQuery操作复选框checkbox

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

注意：操作checked、disabled、selected属性，强制建议只用prop()方法！！，不要用attr()方法。

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

（锋利的jQuery第二版，第149页）

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

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

利用name属性值获取checkbox对象，然后循环判断checked属性（true表示被选中，false表示未选中）

<input type="checkbox" name="test" value="1"/><span>1</span>
<input type="checkbox" name="test" value="2"/><span>2</span>
<input type="checkbox" name="test" value="3"/><span>3</span>
<input type="checkbox" name="test" value="4"/><span>4</span>
<input type="checkbox" name="test" value="5"/><span>5</span>
<input type='button' value='提交' onclick="fun()"/>

function fun(){
    obj = document.getElementsByName("test");
    check_val = [];
    for(k in obj){
        if(obj[k].checked)
            check_val.push(obj[k].value);
    }
    alert(check_val);
}

View Code

或者采用jquery去获取class，同样遍历去取值。

二、jQuery操作按钮button

　　禁用、启用以及样式等

禁止使用button

1.直接写在<button>标签里面

<button id="btn" disabled="disabled">设置按钮不可以点击</button>

2.js禁用button

document.getElementById("btn").disabled=true;

3.使用jquery禁用button

 $("#btn").prop('disabled','disabled');

设置禁用之后启用button

$("#btn").removeAttr("disabled");

$("#btn").attr('disabled','');

更多：jquery禁用、启用button以及button的样式操作

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

一、jQuery操作复选框checkbox

二、jQuery操作按钮button

推荐阅读