Question

Bootstrap切换按钮用于切换div文本粗体状态。

在第一次单击按钮上应保持已选中状态，文本将变为粗体。在第二次单击按钮应保持未选中状态，文本应正常。我尝试了下面的代码但只是第一次点击工作。第二次单击不会从文本中删除粗体。

如何解决这个问题？

＆＃13;

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script>
        $(function () {
            $('#designer-javascript-bold').change(function (e) {
                //         $(this).button('toggle');
                var checked = $(this).val();
                $(".ui-selected").each(function () {
                    $(this).css("font-weight", checked === "on" ? "bold" : "normal");
                });
            });
        });

    </script>

</head>
<body>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-info">
            <input type="checkbox" autocomplete="off" id="designer-javascript-bold"><span class="glyphicon glyphicon-bold"></span>
        </label>
    </div>
    <div class="ui-selected">Toggleable text</div>
</body>

＆＃13;

Answer 1

我不确定你为什么要检查输入的static func currentDevice() -> String{ switch UIScreen.mainScreen().bounds.height { case 480 : return "iPhone 4/S" case 568 : return "iPhone 5/S" case 667 : return "iPhone 6/S" case 736 : return "iPhone 6 Plus/S" default: return "" } }。 value属性似乎更相关：

checked

这将为您提供在三元组中使用的布尔值：

var checked = $(this).prop('checked');

示例：

$(this).css("font-weight", checked ? "bold" : "normal");

Answer 2

你应该使用is（＆＃34;：checked＆＃34;）而不是val（）（然后测试如果checked为true或false）

编辑：有人在我面前3分钟给出了几乎相同的答案;）也许是以更优雅的方式。

＆＃13;

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script>
        $(function () {
            $('#designer-javascript-bold').change(function (e) {
                
                var checked = $(this).is(":checked");
             
                $(".ui-selected").each(function () {
                    $(this).css("font-weight", checked ? "bold" : "normal");
                });
            });
        });

    </script>

</head>
<body>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-info">
            <input type="checkbox" autocomplete="off" id="designer-javascript-bold"><span class="glyphicon glyphicon-bold"></span>
        </label>
    </div>
    <div class="ui-selected">Toggleable text</div>
</body>

＆＃13;

使用引导按钮切换粗体状态

2 个答案: