javascript - 如何使用引导程序 4 创建 3 状态复选框按钮
问题描述
我正在创建一个过滤器表单,我想过滤掉具有属性 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 - 点击链接时如何防止跳转到页面顶部?
- reactjs - MUI 有表单组件吗?
- java - 请帮我解决这个while循环
- vue.js - vuex.esm.js:460 [vuex] 未知突变类型:removeProductFromCart
- python - 当使用许多变量时,如何使循环更短、更清晰?
- r - 根据另一个数据帧的值从一个数据帧传输某些数据
- regex - 我对带有斜线的正则表达式巧合有疑问
- python - 用于 URL 特征提取的 Chrome 内容脚本,如何从 ML 模型计算权重?
- https - 接受两个数字之间的 Uri
- python - Python - 嵌套字典删除键并更新字典名称