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

单选样式.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"这个是把样式设置成了按钮样式.