twitter-bootstrap Bootstrap 4 切换按钮

Bootstrap 4 toggle button

提问by Mike

I am building a simple vehicle inspection form and I would like to use checkboxes as buttons to capture true/falsevalues.

我正在构建一个简单的车辆检查表，我想使用复选框作为按钮来捕获true/false值。

This is supposed to be trivial using Bootstrap 4.

使用Bootstrap 4这应该是微不足道的。

I would however like to adjust the default behaviour of the buttons; to toggle between the successand dangerclasses to denote true/false.And also in some cases to change the text of the button, eg. "Leaks" -> "No Leaks".

但是，我想调整按钮的默认行为；在success和danger类之间切换以表示true/ false。并且在某些情况下还可以更改按钮的文本，例如。“泄漏”->“无泄漏”。

1. I have got the toggle working with the help of @Yass but I am not getting the correct true/falsevalues when I submit the form. Even though the checkboxes are checked (true), the values are coming through as if they are false.

2. I'm not sure how to handle the change in text when toggling between the two states.

1. 我在@Yass 的帮助下获得了切换功能，但是在提交表单时我没有得到正确的true/false值。即使复选框被选中 ( true)，值也会通过，就好像它们是false。

2. 我不确定在两种状态之间切换时如何处理文本的变化。

Checkbox Buttons

复选框按钮

HTML

HTML

<div class="row">
    <div class="col-sm-4 col-xs-12">
        <p class="font-weight-bold">Bonnet</p>
        <div data-toggle="buttons">
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="oil" checked="checked" autocomplete="off"> Oil
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="coolant" checked="checked" autocomplete="off"> Coolant
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="breakfluid" checked="checked" autocomplete="off"> Break Fluid
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="screenwash" checked="checked" autocomplete="off"> Screen Wash
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="noleaks" checked="checked" autocomplete="off"> No Leaks
            </label>
        </div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <p class="font-weight-bold">Outside</p>
        <div data-toggle="buttons">
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="tyres" checked="checked" autocomplete="off">
                Tyres
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="wiperblades" checked="checked" autocomplete="off">
                Wiper Blades
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="lights" checked="checked" autocomplete="off">
                Lights
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="indicators" checked="checked" autocomplete="off">
                Indicators
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="outcleanliness" checked="checked" autocomplete="off">
                Cleanliness
            </label>
        </div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <p class="font-weight-bold">Inside</p>
        <div data-toggle="buttons">
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="horn" checked="checked" autocomplete="off">
                Horn
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="breaks" checked="checked" autocomplete="off">
                Breaks/Handbrake
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="seatbelt" checked="checked" autocomplete="off">
                Seatbelt
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="windscreen" checked="checked" autocomplete="off">
                Windscreen
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="incleanliness" checked="checked" autocomplete="off">
                Cleanliness
            </label>
        </div>
    </div>
</div>

JavaScript

JavaScript

$('label.btn').on('click', function() {
    //Find the child check box.
    var $input = $(this).find('input');

    $(this).toggleClass('btn-danger btn-success');
    //Remove the attribute if the button is "disabled"
    if ($(this).hasClass('btn-danger')) {
        $input.removeAttr('checked');
    } else {
        $input.attr('checked', '');
    }

    return false; //Click event is triggered twice and this prevents re-toggling of classes
});

https://jsfiddle.net/mstnorris/9fyzfu8w/

https://jsfiddle.net/mstnorris/9fyzfu8w/

回答by Bot élecul

Here is an alternative solution with pure Javascript. Add a hidden input associated to each button, and update hidden values each time the button is clicked.

这是使用纯 Javascript 的替代解决方案。添加与每个按钮关联的隐藏输入，并在每次单击按钮时更新隐藏值。

HTML :

HTML :

<!-- Visible button -->
<input onclick="toogleButton(this,'hiddenButton')" class="btn btn-secondary" type="button" value="Toogle">
<!-- Hidden input -->
<input name="FM_city" id="hiddenButton" type="hidden" value="0"></input>

Javascript :

Javascript :

// Called when the button is clicked
function toogleButton(callingElement,hiddenElement)
{
    // Check the color of the button
    if (callingElement.classList.contains('btn-secondary'))
    {
        // If the button is 'unset'; change color and update hidden element to 1
        callingElement.classList.remove('btn-secondary');
        callingElement.classList.add('btn-success');
        document.getElementById(hiddenElement).value="1";
    }
    else 
    {
        // If the button is 'set'; change color and update hidden element to 0
        callingElement.classList.remove('btn-success');
        callingElement.classList.add('btn-secondary');
        document.getElementById(hiddenElement).value="0";
    }
}

When the form is submitted, process value of the hidden input. Note that you can easily change the text of the button with : callingElement.value="New text here"Last remark : initial value of hidden elements must be in accordance with the initial color of the associated button.

当表单提交时，处理隐藏输入的值。请注意，您可以使用以下命令轻松更改按钮的文本：callingElement.value="New text here"最后一句：隐藏元素的初始值必须与关联按钮的初始颜色一致。

回答by Zim

Handle the click event of the buttons, and toggle the checked value of the input using jQuery .prop()like this..

处理按钮的单击事件，并.prop()像这样使用 jQuery 切换输入的选中值。

var $chk = $(this).find('[type=checkbox]');
$chk.prop('checked',!$chk.prop('checked'));

Demo: http://codeply.com/go/IeuO1fPf7H

演示：http: //codeply.com/go/IeuO1fPf7H