• Bootstrap框架中radio设置值


    Bootstrap中的radio设置值不能像我们平常给普通radio赋值那样,因为无效。
    我们用Bootstrap框架里的radio组件,代码:

     <div class="radio-list">
             <label>
                  <input type="radio" value="1" name="gender" data-title="男"/> 男
             </label>
             <label>
                  <input type="radio" value="2" name="gender" data-title="女"/> 女
             </label>
    </div>
    

    最后Bootstrap给我们生成的代码:

    <div class="radio-list">
    
             <label>
                <div class="radio">
                    <span class="checked">
                        <input type="radio" value="1" name="gender" data-title="男" >  
                    </span>
                </div> 男
              </label>
    
              <label>
                   <div class="radio"><span><input type="radio" value="2" name="gender" data-title="女"></span></div> 女
             </label>
     </div>
    

    Bootstrap做了什么?

    简短一下,其实是:
    <input type="radio" value="1" name="gender" data-title="男"/> 男 这句变成了
    <div class="radio"><span><input type="radio" value="1" name="gender" data-title="男"></span></div> 男
    其实是在radio外加了一个,然后再加一个class="radio" 的

    如果是选中下的input代码是啥样?

    <div class="radio"><span class="checked"><input type="radio" value="1" name="gender" data-title="男"></span></div> 男
    

    选中的不是直接在input上加checked属性,而是在input的父元素span的class上加的,根据这种规则,我们在父元素上加个checked的class。
    于是设置input被选中:$(':radio[name=gender][value='1']').parent().addClass('checked');
    咦 发现果然radio被选中了,但是!!!当我设置了input必选的情况下,发现通不过验证,意味着其实没那么简单。

    然后我就按照常规 给radio赋值:$(':radio[name=gender][value='1']').parent().addClass('checked').attr("checked",true)
    发现问题依旧存在,最后针对attr设置无效,一搜 发现应该用prop(),好吧,是我无知了。

    最后设置:$(':radio[name=gender][value='1']').parent().addClass('checked').prop("checked",true),确实可以

    radio取值就是普通的取值方式:

    var sex = $(':radio[name=gender]:checked').val();
    

    Jquery的attr()和prop()的区别,还是建议看一下。总的来说设置 checked、selected、disabled这类的,在jq的1.6+版本的一律用prop()设置比较好,其它用attr()。

  • 相关阅读:
    js ++i和i++的区别
    js斐波那契数列
    js二分查找算法
    js查找、自组织数据
    查找数组最小值、最大值
    CSS布局(圣杯、双飞翼、flex)
    碰撞检测实现
    ECharts注释
    购物查看放大
    动手封装一个滚轮事件吧!
  • 原文地址:https://www.cnblogs.com/xinxinmifan/p/Bootstrap_radio.html
Copyright © 2020-2023  润新知