选中复选框后显示隐藏字段？

时间：2016-05-11 05:23:00

标签： javascript php jquery html checkbox

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

9 个答案:

答案 0 :(得分：3)

试试这个 在您的复选框的onchange事件调用函数 onchange =“showHiddenField（this）”

和功能就像是

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

答案 1 :(得分：2)

是的，你可以这样做。以下代码解决方案。我是用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>

答案 2 :(得分：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>

答案 3 :(得分：1)

好的，这就是它的工作原理，每个复选框都会将id的{​​{1}}作为一个类，这样当点击该复选框时，我们将使用它的类来制作它的{{ 1}}可见。即使您有1000个复选框

，这也会有效 

box
box

答案 4 :(得分：1)

  

首先请记下你的想法＆＃34; id＆＃34;只适用于每个页面上的单个元素，对于多个元素，您可以应用＆＃34;类＆＃34;

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

  在Jquery中

＆＃13;
＆＃13; 
$(document).ready(function(){

 $(".checkbox").change(function(){
 		
  if($(this).prop("checked")){
  	$(this).parents(".row").find(".box").show();
  }else{
  	
     $(this).parents(".row").find(".box").hide();
  }
  });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：1)

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

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

＆＃13;
＆＃13; 
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';
    }
  };
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：1)

在谷歌Chrome浏览器上进行测试。

获取输入的id取“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';
  }
}

答案 7 :(得分：0)

您可以使用我在此处执行的代码，您的每个复选框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，但你可以根据需要设置你的函数名。这对你有帮助。

答案 8 :(得分：0)

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

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

使用class属性获取动态过程。

相关问题
最新问题