如何隐藏表单中未选中的输入域而只显示选中的输入域
如何隐藏表单中未选中的输入域而只显示选中的输入域
提问于 2019-07-30 20:15:05
我有一个有很多输入域的表单。在每个输入更改上，都有一个复选框被选中。现在我只想显示那些在按钮点击时被选中的字段，并隐藏其他字段。我不确定实现这一行为的最佳方式是什么。稍后，单击“下一步”按钮，我将只提交选中的字段。
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" >click</button>下面的jQuery函数用于选中输入字段更改时的复选框
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});回答 5
Stack Overflow用户
发布于 2019-07-30 20:25:21
如果我没理解错你的问题，它可以帮助你：https://api.jquery.com/has/如下：
$('.form-group:not(:has(input:checked))').hide();Stack Overflow用户
发布于 2019-07-30 20:38:42
试试这一行js代码
<button type="button" id="btn">click</button>
$('#btn').on('click', function () {
$('[type=checkbox]:not(:checked)').closest(".form-group").hide()
});Stack Overflow用户
发布于 2019-07-30 20:40:34
这里有一个简单的例子。或者，你也可以看看Select2插件。
<script>
$(document).ready(function(){
//hide by default
$('#field1').hide();
$('#check1').click(function(e){
if ($('#check1').prop('checked')){
$('#field1').show();
}else{
$(#field1).hide();
}
});
});
</script>
<body>
<form>
<label for="check1">click me</label>
<input id="check1" type="checkbox"/>
<input id="field1" type="text"/>
</form>
</body>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57271463
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号