gpt4 book ai didi

javascript - 如何使用 bootstrap 4 创建 3 状态复选框按钮

转载 作者:行者123 更新时间:2023-12-02 20:21:50 25 4
gpt4 key购买 nike

我正在创建一个过滤器表单,我想过滤掉具有属性 high=true 或 high=false 的对象,或者忽略该属性。
到目前为止,我得到的只是“开启”的值。
同样在第三个值(null 或其他)上,我希望样式有所不同,例如禁用。
任何人都知道一个简单的方法来做到这一点?

function readValue() {
var highValue = $('#high').val();
$('#result').html(highValue);
if (highValue === null) {
//don't filter
} else {
//filter
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="btn-group-toggle" data-toggle="buttons">
<label onclick="readValue()" class="btn btn-secondary active">
<input id="high" type="checkbox" checked autocomplete="off"> High
</label>
</div>
Result:<div id='result'></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

最佳答案

我想出了一种方法,可以在按钮指示状态时使用一个按钮切换尽可能多的状态。这就是我一直在寻找的 - 大多数代码都是从互联网的不同部分找到并放在一起的!
如果您有如何使本文更短且更易于阅读的建议,请发表评论或直接对其进行编辑:)

var $radios = $('input[type="radio"][name="high"]');
$('#result').html($radios.filter(':checked').val());

$('#toggler').click(function() {
var colorClasses = ["btn-danger", "btn-success", "btn-secondary"];
var $checked = $radios.filter(':checked');
var $next = $radios.eq($radios.index($checked) + 1);
if (!$next.length) {
$next = $radios.first();
}
$next.prop("checked", true);
var newValue = $radios.filter(':checked').val();
$(this)
.removeClass(colorClasses.join(" "))
.addClass(colorClasses[newValue]);
$('#result').html(newValue);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="btn-group-toggle" data-toggle="buttons">
<input type="radio" name="high" value="2" checked hidden>
<input type="radio" name="high" value="1" hidden>
<input type="radio" name="high" value="0" hidden>
<button type="button" id="toggler" class="btn btn-secondary">High</button>
</div>
Result:
<div id='result'></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

关于javascript - 如何使用 bootstrap 4 创建 3 状态复选框按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51198494/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com