Bootstrap框架中radio设置值

时间：2024-02-19 18:40:26

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()。

相关文章