下拉列表、单选按钮、复选框常用用法总结

下拉列表

html

<select id="demoselect">
    <option value="eq">相等</option>
    <option value="gt">大于</option>
    <option value="lt">小于</option>
</select>

获取下拉列表的值

$("#demoselect").val()//value  
$("#demoselect").find("option:selected").text()//text
$("#demoselect").text()    //获得下拉列表的所有text

获得索引

$("#demoselect").get(0).selectedIndex  //选中项的索引
$("#demoselect option:last").get(0).index  //获得下拉列表的最大索引值

设置下拉列表的选中项

$("#demoselect").val("eq") //通过val
$("#demoselect").get(0).selectedIndex = 1 //通过索引，选中第二个选项
$("#demoselect").find("option:eq(1)").get(0).selected = true //选中第二个
//通过下拉列表的text选中
$("#demoselect").find("option").each(function () {
    if ($(this).text() == "大于") {
        $(this).get(0).selected = true
    }
})

按索引设置所有select的选中项

find("select").find("option:eq(0)").prop("selected", true)

插入option

$("#demoselect").prepend("<option value='Value'>Text</option>"); //往前插入
$("#demoselect").append("<option value='Value'>Text</option>"); //往后插入

删除option

$("#demoselect option:last").remove(); //最后
$("#demoselect option:eq(1)").remove(); //通过索引
$("#demoselect option[value='eq']").remove(); //通过value

清空下拉框

$("#demoselect option[value='eq']").remove();
$("#demoselect option").empty();

option隐藏显示

$("#rule-option-2 option").css("display", "none")  //隐藏
$("#rule-option-2 option[value='" + v + "']").css("display", 'inherit')//显示

单选按钮

html

<input type="radio" name="radio" id="radio1" value="1" />1
            <input type="radio" name="radio" id="radio2" value="2" />2
            <input type="radio" name="radio" id="radio3" value="3" />3
            <input type="radio" name="radio" id="radio4" value="4" />4

选中

$(":radio:eq(2)").prop("checked", 'checked');
$("input[name=radio]:eq(0)").prop("checked", 'checked');
$("input[name='radio'][value='2']").attr("checked", 'checked'); //通过value值
$(":radio[name='radio']").get(1).checked = true;

取消选中的单选框

$("#radio1").removeAttr("checked");    
$(":radio:checked").removeAttr("checked");

获得一组radio中被选中的单选按钮的值

$(":radio:checked").val();

判断某一个单选按钮是否被选中

$("#radio1").prop("checked") //返回boolean

单击时触发

$(function () {
    $("input[type='radio']").click(function () {
        var id = $(this).attr("id");
        alert(id);
    });
});

复选框

html

<div>
    <input id="checkAll" type="checkbox" />全选
    <input name="subBox" type="checkbox" value="3"/>项1
    <input name="subBox" type="checkbox" />项2
    <input name="subBox" type="checkbox" />项3
    <input name="subBox" type="checkbox" />项4
</div>

判断复选框是否被选中

$("#checkAll").prop("checked")

选中、不选中

$("#checkAll").prop("checked", true);   
$("#checkAll").prop("checked", 'checked');  
$("input[type=checkbox][name=subBox]").get(2).checked = true; //按索引选中
$("#checkAll").prop("checked", false);   
$("#checkAll").prop("checked", ''); 
$("input[name=subBox][value='3']").prop("checked", 'checked')

$("input[name=subBox]:checked").val() //复选框必须有value才有用    
循环输出被选中的复选框
$("input[type=checkbox]:checked").each(function () { //由于复选框一般选中的是多个,所以可以循环输出选中的值  
    alert($(this).val());
});