• 《jQuery判断radio、checkbox、select 是否选中和设置选中问题以及获取选中值》总结


    
    
    <form>
    <input type="radio" name="gender" id="man" value="男" /><input type="radio" name="gender" id="woman" value="女" /><br />
    <input type="checkbox" name="math" id="math"/>数学
    <input type="checkbox" name="english" id="english"/>英语
    <input type="checkbox" name="chinese" id="chinese"/>语文
    <br />
    <select id="province">
    <option value="beijing">北京</option>
    <option value="hubei">湖北省</option>
    <option value="hunan">湖南省</option>
    <option value="guangdong">广东省</option>
    </select>
    <input id="btnSubmit" type="submit" value="submit" />
    </form>

    1. 判断radio是否被选中:

    //可以通过判断radio被选中的个数长度是否为0
    var len = $('input[name="gender"]:checked').length;
    if(len){
        console.log('radio没有选择,请选择一个!');
    }
    //判断某个radio是否被选中
    if($('#man:checked').length){
        console.log('你选择了男的radio');
    }
    //或者
    if($('#man').is(':checked')){
        console.log('你选择了男的radio');
    }

    2. 设置radio选中:

    //javascript方法:
    document.getElementById("man").checked = true;
    //jQuery的prop方法
    $('#man').prop('checked', true);
    //取消选中
    $('#man').prop('checked', false);
    //不建议使用以下方法
    $('#man').attr('checked', true);

    3. 获取radio被选中的值

    $('input[name="gender"]:checked').val();
    //或者
    $('input[name="gender"][checked]').val();

    4. 判断checkbox是否被选中:

    //判断某个checkbox是否被选中,跟radio方法一样
    if($('#math:checked').length){
        console.log('你选择了数学');
    }
    //或者
    if($('input[name="math"]:checked').length){
        console.log('你选择了数学');
    }
    //或者
    if($('#math').is(':checked')){
        console.log('你选择了数学');
    }
    //还有一种方法是使用javascript
    if(document.getElementById("math").checked == true){
      console.log('你选择了数学');
    }
    //注意:网上流传的如下这种判断方法是不恰当的,与jQuery版本有关
    if($('#math').attr('checked') == true)
    if($('#math').attr('checked') == undefined)
    if($('#math').attr('checked') == 'checked')

    5. 设置checkbox选中:

    /***跟radio的方法一样***/
    //javascript方法:
    document.getElementById("math").checked = true;
    //jQuery的prop方法
    $('#math').prop('checked', true);
    //取消选中
    $('#math').prop('checked', false);
    //不建议使用以下方法
    $('#math').attr('checked', true);

    6. select的取值、选中

    //获取当前选中项的值
    
    $("#province").val();
    
    //获取当前选中项的text
    
    $("#province").find("option:selected").text();
    
    //设置value值为guangdong的项选中
    
    $("#province").val('guangdong');
    
    //设置text为广东的项选中
    
    $(".selector").find("option[text='广东']").attr("selected",true);
  • 相关阅读:
    MarkDown
    【ImageView】ImageView点击事件报错空指针
    【原创】初识懒人开发库---ButterKnife
    将博客搬至CSDN
    【练习】内容提供器二、创建自己的内容提供器并测试
    【练习】内容提供器一、访问其他程序的数据
    【转载】Android数据存储之SQLite
    【实战】广播实践,实现登录强制下线
    【实战】聊天窗口的实现
    【转载】Adapter用法总结大全
  • 原文地址:https://www.cnblogs.com/boliang/p/5554593.html
Copyright © 2020-2023  润新知