[英]Bootstrap 4 toggle button
I am building a simple vehicle inspection form and I would like to use checkboxes as buttons to capture true
/ false
values.我正在构建一个简单的车辆检查表,我想使用复选框作为按钮来捕获
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
success
and danger
classes to denote true
/ false
.在
success
和danger
类别之间切换以表示true
/ false
。 And also in some cases to change the text of the button, eg.并且在某些情况下还可以更改按钮的文本,例如。 "Leaks" -> "No Leaks".
“泄漏”->“无泄漏”。
I have got the toggle working with the help of @Yass but I am not getting the correct true
/ false
values when I submit the form.我在@Yass 的帮助下进行了切换,但是在提交表单时我没有得到正确的
true
/ false
值。 Even though the checkboxes are checked ( true
), the values are coming through as if they are false
.即使复选框被选中 (
true
),值也会通过,就好像它们是false
。
I'm not sure how to handle the change in text when toggling between the two states.我不确定在两种状态之间切换时如何处理文本的变化。
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/
Here is an alternative solution with pure Javascript.这是使用纯 Javascript 的替代解决方案。 Add a hidden input associated to each button, and update hidden values each time the button is clicked.
添加与每个按钮关联的隐藏输入,并在每次单击按钮时更新隐藏值。
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"
最后备注:隐藏元素的初始值必须与关联按钮的初始颜色一致。
Handle the click event of the buttons, and toggle the checked value of the input using jQuery .prop()
like this..处理按钮的单击事件,并像这样使用 jQuery
.prop()
切换输入的选中值。
var $chk = $(this).find('[type=checkbox]');
$chk.prop('checked',!$chk.prop('checked'));
Demo: http://codeply.com/go/IeuO1fPf7H演示: http : //codeply.com/go/IeuO1fPf7H
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.