如何解决单击任何复选框只能激活一个字段？
我正在尝试制作一个表格，其中每个单独的复选框都有一个数字输入字段，该字段仅在选中该复选框时才会显示。到目前为止，我已经知道了：
<!-- Option1 -->
<div class="form-row">
<div class="form-group col-md-8">
<div class="form-check">
<input class="form-check-input showman" type="checkbox" onchange="showqt()" value="Button Chicken Amritsari" id="c1">
<label class="form-check-label" for="c1">
Button Chicken Amritsari<i><br>(Boneless) Serves 2<br>INR 290</i>
</label>
</div>
</div>
<div class="form-group col-md-4 " id="ifYes" style="display: none; float:right;">
<!-- <label for="qtcounter">Quantity:</label> -->
<div class="input-group" id="qtcounter">
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="1" name="quantity" class="quantity-field">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
</div>
</div>
<!-- Option 1 ends -->
<div class="form-row">
<div class="form-group col-md-8">
<div class="form-check">
<input class="form-check-input showman" type="checkbox" onchange="showqt()" value="Chicken Korma Awadhi" id="c2">
<label class="form-check-label" for="c2">
Chicken Korma Awadhi<br><i> (Boneless) Serves 2<br>INR 290</i>
</label>
</div>
</div>
<div class="form-group col-md-4" id="ifYes" style="display: none; float:right;">
<!-- <label for="qtcounter">Quantity:</label> -->
<div class="input-group" id="qtcounter">
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="1" name="quantity" class="quantity-field">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
</div>
</div>
这是我的JS：
function showqt(){
if ($('.showman').is(":checked")) {
document.getElementsByClassName('className')
document.getElementById('ifYes').style.display = 'inline';
}
else {
document.getElementById('ifYes').style.display = 'none';
}
}
现在，只要我只有一个复选框，它就可以正常工作。但是，当我添加更多复选框时，无论单击哪个复选框，都只单击第一个复选框的输入字段。我希望根据是否选中复选框来显示每个复选框的输入字段。
是否有全局方法来执行此操作，还是需要为每个复选框编写自定义JS？
解决方法
<!-- Option1 -->
<div class="form-row">
<div class="form-group col-md-8">
<div class="form-check">
<input class="form-check-input showman" type="checkbox" onchange="showqt(this)" value="Button Chicken Amritsari" id="c1">
<label class="form-check-label" for="c1">
Button Chicken Amritsari<i><br>(Boneless) Serves 2<br>INR 290</i>
</label>
</div>
</div>
<div class="form-group col-md-4 " id="ifYes" style="display: none; float:right;">
<!-- <label for="qtcounter">Quantity:</label> -->
<div class="input-group" id="qtcounter">
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="1" name="quantity" class="quantity-field">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
</div>
</div>
<!-- Option 1 ends -->
<div class="form-row">
<div class="form-group col-md-8">
<div class="form-check">
<input class="form-check-input showman" type="checkbox" onchange="showqt(this)" value="Chicken Korma Awadhi" id="c2">
<label class="form-check-label" for="c2">
Chicken Korma Awadhi<br><i> (Boneless) Serves 2<br>INR 290</i>
</label>
</div>
</div>
<div class="form-group col-md-4" id="ifYes" style="display: none; float:right;">
<!-- <label for="qtcounter">Quantity:</label> -->
<div class="input-group" id="qtcounter">
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="1" name="quantity" class="quantity-field">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
</div>
</div>
function showqt(obj){
if ($(obj).is(":checked")) {
jQuery(obj).parents(".form-row").find("#ifYes").show();
}
else {
jQuery(obj).parents(".form-row").find("#ifYes").hide();
}
}
它将起作用。
,只需使用jQuery方法：
$('#ifYes').css('display','block'); and $('#ifYes').css('display','none');
您也可以使用:checked伪选择器仅使用CSS来实现此目的。下面的代码段使用~通用同级组合器来切换计数器的可见性。
.form-row {
padding-top: 1rem;
}
.counter {
display: none;
}
.showman:checked ~ .counter{
display: block;
}<!-- Option1 -->
<div class="form-row">
<input class="form-check-input showman" type="checkbox" value="Button Chicken Amritsari" id="c1">
<label class="form-check-label" for="c1">
Button Chicken Amritsari<i><br>(Boneless) Serves 2<br>INR 290</i>
</label>
<div class="counter">
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="1" name="quantity" class="quantity-field">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
</div>
<!-- Option 1 ends -->
<div class="form-row">
<input class="form-check-input showman" type="checkbox" value="Chicken Korma Awadhi" id="c2">
<label class="form-check-label" for="c2">
Chicken Korma Awadhi<br><i> (Boneless) Serves 2<br>INR 290</i>
</label>
<div class="counter">
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="1" name="quantity" class="quantity-field">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
</div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。