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

下拉列表

<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
}
})

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

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

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

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

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

单选按钮

<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:checked").val();

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

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

复选框

<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());
});