javascript - 选中复选框时显示隐藏字段？

Question

您好，我有多个类似的复选框。我在复选框上应用 javascript 以显示隐藏字段。我创建了一个适用于单个复选框的 js 代码，我想应用适用于所有复选框的代码。

<div class="row">
  <div class="col-md-12">
      <div class="form-group">
          <div class="col-md-2">
             <label>Practical Course:</label>&nbsp;&nbsp;
             <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>&nbsp;&nbsp;
             <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 进行此操作的方法。

Answer 1

试试这个在复选框的 onchange 事件调用函数上 onchange="showHiddenField(this)"

功能类似于

function showHiddenField(currentObject) {
    var inputDiv = $(currentObject).parent().next();
    if ($(currentObject).is(":checked")) {
        $(inputDiv).show().focus();
    }
    else {
        $(inputDiv).hide();
    }
}