美文网首页
radio checkbox select select2 使用

radio checkbox select select2 使用

作者: 从不放弃 | 来源:发表于2016-09-21 00:35 被阅读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/

    相关文章

      网友评论

          本文标题:radio checkbox select select2 使用

          本文链接:https://www.haomeiwen.com/subject/ndnoettx.html