选中复选框时显示隐藏字段？
Posted
技术标签:
【中文标题】选中复选框时显示隐藏字段？【英文标题】：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>
<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 的方法。
【问题讨论】：
@yoo 你能详细说明一下吗id 必须是唯一的。请改用 class。
@RejithRKrishnan 我知道我可以使 id 唯一并为第二个复选框创建第二个 js，但我希望单个 js 代码应该满足所有复选框，这可能吗？
@KartikeyVishwakarma 你可以使用this之类的东西。
【参考方案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>
<!--<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>
<!--<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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';
【讨论】：
以上是关于选中复选框时显示隐藏字段？的主要内容，如果未能解决你的问题，请参考以下文章