下拉列表
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());
});