选中复选框时显示隐藏字段？答案

【问题标题】：Show hidden fields when checkbox is checked?选中复选框时显示隐藏字段？
【发布时间】：2016-09-06 07:50:52
【问题描述】：

您好，我有多个类似的复选框。我在复选框上应用 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 的方法。

【问题讨论】：

@yoo 你能详细说明一下吗
id 必须是唯一的。请改用 class。
@RejithRKrishnan 我知道我可以使 id 唯一并为第二个复选框创建第二个 js，但我希望单个 js 代码应该满足所有复选框，这可能吗？
@KartikeyVishwakarma 你可以使用this之类的东西。

标签： javascript php jquery html checkbox

【解决方案1】：

使用 javascript function 来制作。

function toggleFields(boxId, checkboxId) {
  var checkbox = document.getElementById(checkboxId);
  var box = document.getElementById(boxId);
  checkbox.onclick = function() {
    console.log(this);
    if (this.checked) {
      box.style['display'] = 'block';
    } else {
      box.style['display'] = 'none';
    }
  };
}
toggleFields('box1', 'checkbox1');
toggleFields('box2', 'checkbox2');

<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<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">-->
        <input id="checkbox1" type="checkbox">
      </div>
      <!--<div class="col-md-4" id="box" style="display: none;">-->
      <div class="col-md-4" id="box1" 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">-->
        <input id="checkbox2" type="checkbox">
      </div>
      <!--<div class="col-md-4" id="box" style="display: none;">-->
      <div class="col-md-4" id="box2" style="display: none;">
        <input type="number" name="practical2" class="form-control">
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

好的，这就是它的工作原理，每个复选框都将其box 的id 作为一个类，因此当单击该复选框时，我们将使用其类使其box 可见。即使您有 1000 个复选框，这也可以工作

var checkbox = document.querySelectorAll("#check1, #check2");
for (i = 0; i < checkbox.length; i++) {
  checkbox[i].onclick = function() {

    if (this.checked) {
      document.getElementById(this.getAttribute('class')).style['display'] = 'block';
    } else {
      document.getElementById(this.getAttribute('class')).style['display'] = 'none';
    }
  };
}

<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="check1" type="checkbox" class="box">
      </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="check2" type="checkbox" class="box2">
      </div>

      <div class="col-md-4" id="box2" style="display: none;">
        <input type="number" name="practical2" class="form-control">
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

您可以使用我在此中所做的代码，您的每个复选框 id 创建像这样的“checkbox_1”和你的盒子 id 像这样 box_1 等等其他数字请检查下面的代码，你会知道你需要做什么你的 html 和 java 脚本。

<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_1" type="checkbox" onclick="myfunction(this);">
          </div>

          <div class="col-md-4" id="box_1" 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_2" type="checkbox"  onclick="myfunction(this);">
          </div>

          <div class="col-md-4" id="box_2" style="display: none;">
               <input type="number" name="practical2" class="form-control">
          </div>
       </div>
    </div>
 </div>


<script>
 function myfunction(obj)
 {
        var element_index = obj.id.split("_");
        console.log('box_'+element_index[1]);
        var box = document.getElementById('box_'+element_index[1]);
        if(obj.checked) {
         box.style['display'] = 'block';
        } else {
        box.style['display'] = 'none';
        }

 }
 </script>

在脚本中，我给出了函数名 myfunction，但您可以根据需要设置函数名。这对你有帮助吗？

【讨论】：

【解决方案4】：

您的代码中最狭窄的（静态）建议：

$(document).ready(function() {
    $('input[type=checkbox]').change(function(){
        if($(this).prop('checked')){
            $(this).parent().next().show();
        }else{
            $(this).parent().next().hide();
        }
    });
});

使用类属性获取动态进程。

【讨论】：

【解决方案5】：

是的，您可以这样做。下面代码中的解决方案。我是用 JQuery 做的。

$('input[type="checkbox"]').click(function(){
  console.log(this);
 // $(this).parent().next().css('display','block');
  $(this).parent().next().toggle('show');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
      <div class="form-group">
          <div class="col-md-2">
             <label>Practical Course:</label>&nbsp;&nbsp;
             <input name="chkbox" type="checkbox">
          </div>

          <div class="col-md-4" data-box="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 name="chkbox" type="checkbox">
          </div>

          <div class="col-md-4" data-box="box" style="display: none;">
               <input type="number" name="practical2" class="form-control">
          </div>
       </div>
    </div>
 </div>

【讨论】：

【解决方案6】：

首先请记住，“id”仅适用于每个页面上的单个元素，对于多个元素，您可以应用“类”

id="checkbox" 替换为class="checkbox"

在 Jquery 中

$(document).ready(function(){

 $(".checkbox").change(function(){
 		
  if($(this).prop("checked")){
  	$(this).parents(".row").find(".box").show();
  }else{
  	
     $(this).parents(".row").find(".box").hide();
  }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
      <div class="form-group">
          <div class="col-md-2">
             <label>Practical Course:</label>&nbsp;&nbsp;
             <input class="checkbox" type="checkbox">
          </div>

          <div class="col-md-4 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 class="checkbox" type="checkbox">
          </div>

          <div class="col-md-4 box" style="display: none;">
               <input type="number" name="practical2" class="form-control">
          </div>
       </div>
    </div>
 </div>

【讨论】：

为什么 OP 应该更改他/她的代码以使用 Jquery？您可以在不使用 Jquery 的情况下做到这一点
是的，但他也使用 jquery 和排序代码做了同样的事情。我已经在 Jquery 中提到了这个 ans。
@TheFlash 请阅读有问题的行请提供一种使用纯 javascript 或 jquery 的方法。

【解决方案7】：

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

功能就像

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

【讨论】：

【解决方案8】：

您可以使用querySelectorAll("[type='checkbox']") 选择所有checkbox 并使用for 循环遍历元素。

注意：id 对于每个元素应该是唯一的。

var checkbox = document.querySelectorAll("[type='checkbox']");
for (i = 0; i < checkbox.length; i++) {
  checkbox[i].onclick = function() {

    if (this.checked) {
      document.getElementById(this.getAttribute('class')).style['display'] = 'block';
    } else {
      document.getElementById(this.getAttribute('class')).style['display'] = 'none';
    }
  };
}

<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="check1" type="checkbox" class="box">
      </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="check2" type="checkbox" class="box2">
      </div>

      <div class="col-md-4" id="box2" style="display: none;">
        <input type="number" name="practical2" class="form-control">
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案9】：

在谷歌浏览器上测试有效。

gets id of input 取“checkbox(gets_target)”字符串后面的数字。创建一个ID，将此数字添加到“box”+数字字符串的末尾

HTML：

<input onChange="display_hidden_field(this)" id="checkbox2" type="checkbox">
<div id="box2" style="display:none;">content</div>

Javascript：

function display_hidden_field(checkbox){
  var box_id = checkbox.id;
  var search_pattern = /checkbox(.*?)$/g;
  var number = search_pattern.exec(box_id);
  number = number[1];
  box_id = 'box'+number;
  var box = document.getElementById(box_id);
  if(checkbox.checked){
    box.style.display = 'block';
  }else{
    box.style.display = 'none';
  }
}

【讨论】：