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()。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】