您好,我有多个类似的复选框。我在复选框上应用 javascript 以显示隐藏字段。我创建了一个适用于单个复选框的 js 代码,我想应用适用于所有复选框的代码。
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox" type="checkbox">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox" type="checkbox">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
JS 代码:-
var checkbox = document.getElementById('checkbox');
var box = document.getElementById('box');
checkbox.onclick = function() {
console.log(this);
if (this.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
};
现在的问题是我可以为所有复选框制作单独的 javascript,但这将包含大量 js 代码,我希望单个 javascript 函数可以在单击时取消隐藏每个复选框中的元素。单个 js 代码应该适用于所有复选框。请提供一种使用纯 javascript 或 jquery 进行此操作的方法。
最佳答案
试试这个 在复选框的 onchange 事件调用函数上 onchange="showHiddenField(this)"
功能类似于
function showHiddenField(currentObject) {
var inputDiv = $(currentObject).parent().next();
if ($(currentObject).is(":checked")) {
$(inputDiv).show().focus();
}
else {
$(inputDiv).hide();
}
}
关于javascript - 选中复选框时显示隐藏字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37153695/