zoukankan      html  css  js  c++  java
  • 《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);
  • 相关阅读:
    suse12安装详解
    Centos7上部署openstack mitaka配置详解(将疑难点都进行划分)
    菜鸟帮你跳过openstack配置过程中的坑[文末新添加福利]
    openstack中dashboard页面RuntimeError: Unable to create a new session key. It is likely that the cache is unavailable.
    Multiple network matches found for name 'selfservice', use an ID to be more specific.报错
    查看 SELinux状态及关闭SELinux
    SELinux深入理解
    IP地址、子网掩码、网络号、主机号、网络地址、主机地址
    Oracle job procedure 存储过程定时任务
    POI文件导出至EXCEL,并弹出下载框
  • 原文地址:https://www.cnblogs.com/boliang/p/5554593.html
Copyright © 2011-2022 走看看