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

2017-01-13 11:40:55来源:CSDN作者:dora_310人点击

下拉列表

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

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

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台