radio checkbox select select2 使用

2016-09-21  本文已影响987人  从不放弃

一、radio

<pre>
<input type="radio" name="modeClass" checked value="a"> aa
<input type="radio" name="modeClass" value="b"> bb
<input type="radio" name="modeClass" value="c"> cc
<input type="radio" name="modeClass" value="d"> dd
</pre>

1、设置radio选中

$('input:radio').eq(1).attr('checked', 'true');

根据索引

$("input:radio[value='a']").attr('checked','true');

根据value

2、获取radio选中

$("input[name='modeClass']:checked").val();

二、checkbox

<pre>
<input type="checkbox" name="createChoice" id="create-choice"> 是否显示
</pre>

1、设置checkbox选中

$("input[name='createChoice']").prop("checked", 'true');

2、取消checkbox选中

$("input[name='createChoice']").removeAttr("checked");

3、获取checkbox状态(是否被选中)

$("input[name='createChoice']:checked").length;

length > 0 ? 被选中 : 未被选中

三、select

<pre>
<select id="test">
<option value="一">11</option>
<option value="二">22</option>
<option value="三">33</option>
</select>
</pre>

1、设置select选中

$(".selector").val("三");

根据value值

<pre>
$("#test option").each(function(i,n){
if($(n).text() == "22"){
$(n).attr("selected",true);
}
});
</pre>

根据text值

$("#test").get(0).selectedIndex = 1 ;

根据索引

2、获取select选中

$("#test").find("option:selected").text();

选中的文本

$("#test").val();

选中的value值

$("#test").get(0).selectedIndex;

选中的index(索引)

3、select重置

var s=document.getElementById("test")
s.options[s.selectedIndex].removeAttribute("selected");
$("#demo").val("一");

4、select禁用

$("#test").prop("disabled", true);

5、select启用

$("#test").prop("disabled", false);

6、select添加监听事件

$("#test").change(function(){});

选择option项时触发

四、select2

<pre>
$("#test").select2({
language: "zh-CN",
theme: "classic",
width: 200
})
</pre>

1、设置select选中

$("#test").val("三").trigger("change");

根据value值

2、获取select选中

$("#test").select2("data");

获取value与text(对象形式 : id即value)

其他同 三、select

使用select2的原因:

1、支持模糊查询
2、兼容IE8

官网地址:https://select2.github.io/

上一篇下一篇

猜你喜欢

热点阅读