微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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>
@H_404_13@Bootstrap做了什么?

简短一下,其实是: 男 这句变成了
其实是在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","checked")
发现问题依旧存在,最后针对attr设置无效,一搜 发现应该用prop(),好吧,是我无知了。查考文章https://codeplayer.vip/p/j7sno

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐