美文网首页
bootstrip radio button 按钮样式的单选组合

bootstrip radio button 按钮样式的单选组合

作者: 吕阳 | 来源:发表于2018-12-27 16:53 被阅读13次
单选样式.jpg

需要导入bootstrip3.
模板代码是

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">规格:</label>
                                    <form class="col-sm-4" autocomplete="off" data-toggle="buttons">
                                        <label class="btn btn-primary">
                                            <input type="radio" name="type"
                                                   checked='checked'
                                                   value="a"> 2核4G
                                        </label>
                                        <label class="btn btn-primary">
                                            <input type="radio" name="type"
                                                   value="b"> 2核4G
                                        </label>
                                        <label class="btn btn-primary">
                                            <input type="radio" name="type"
                                                   value="c"> 2核4G
                                        </label>
                                        <label class="btn btn-primary">
                                            <input type="radio" name="type"
                                                   value="d"> 2核4G
                                        </label>
                                        <label class="btn btn-primary">
                                            <input type="radio" name="type"
                                                   value="e"> 2核4G
                                        </label>
                                        <label class="btn btn-primary">
                                            <input type="radio" name="type"
                                                   value="f"> 2核4G
                                        </label>
                                        <label class="btn btn-primary">
                                            <input type="radio" name="type"
                                                   value="g"> 2核4G
                                        </label>
                                        <label class="btn btn-primary">
                                            <input type="radio" name="type"
                                                   value="h"> 2核4G
                                        </label>
                                    </form>
                                </div>
  • 打开浏览器console,输入:
$('input[name="type"]:checked').val();

就可以显示选中的value值.

data-toggle="buttons"这个是把样式设置成了按钮样式.

相关文章

网友评论

      本文标题:bootstrip radio button 按钮样式的单选组合

      本文链接:https://www.haomeiwen.com/subject/xkcdlqtx.html