如果选中复选框，则获取下一个输入[文本]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如果选中复选框，则获取下一个输入[文本]相关的知识，希望对你有一定的参考价值。
我正在尝试('.hidden-textbox').css('visibility', 'visible')输入checked。例如，问题1，问题4和问题5应将其输入文本框（.hidden-textbox）设置为visible。我怎么能在jQuery和javascript中做到这一点？
我有一些像这样的代码：
<style>
.hidden-textbox {
visibility: hidden;
}
</style>
<div class="question">Question 1: <input type="checkbox" checked><input type="text" class="hidden-textbox"></div>
<div class="question">Question 2: <input type="checkbox"><input type="text" class="hidden-textbox"></div>
<div class="question">Question 3: <input type="checkbox"><input type="text" class="hidden-textbox"></div>
<div class="question">Question 4: <input type="checkbox" checked><input type="text" class="hidden-textbox"></div>
<div class="question">Question 5: <input type="checkbox" checked><input type="text" class="hidden-textbox"></div>
答案
它只能使用css完成
在这个片段中，它将选中一个复选框，然后检查它的同级类并设置可见性
input[type='checkbox']:checked ~ .hidden-textbox{
visibility:visible;
}
.hidden-textbox {
visibility: hidden;
}
input[type='checkbox']:checked~.hidden-textbox {
visibility: visible;
}<div class="question">Question 1: <input type="checkbox" checked><input type="text" class="hidden-textbox"></div>
<div class="question">Question 2: <input type="checkbox"><input type="text" class="hidden-textbox"></div>
<div class="question">Question 3: <input type="checkbox"><input type="text" class="hidden-textbox"></div>
<div class="question">Question 4: <input type="checkbox" checked><input type="text" class="hidden-textbox"></div>
<div class="question">Question 5: <input type="checkbox" checked><input type="text" class="hidden-textbox"></div>另一答案
Selecting Checked Checkboxes
这可以在Javascript中通过将:checked添加到您的选择器中来筛选选中的已选中复选框，如下所示：
var checkedCheckboxes = $("checkbox:checked");
另一答案
您可以结合使用：已选中和相邻的兄弟选择器来实现您的目标。因此：
.hidden-textbox {
visibility: hidden;
}
input[type='checkbox']:checked + input {
visibility: visible;
}<div class="question">Question 1: <input type="checkbox" checked><input type="text" class="hidden-textbox"></div>
<div class="question">Question 2: <input type="checkbox"><input type="text" class="hidden-textbox"></div>
<div class="question">Question 3: <input type="checkbox"><input type="text" class="hidden-textbox"></div>
<div class="question">Question 4: <input type="checkbox" checked><input type="text" class="hidden-textbox"></div>
<div class="question">Question 5: <input type="checkbox" checked><input type="text" class="hidden-textbox"></div>另一答案
要检查是否选中了复选框，您需要$(this).prop('checked')== true。
$('input:checkbox').each(function(){
if($(this).prop('checked')== true) {
$(this).next('input').val('test');
$(this).next('input').show();
} else {
$(this).next('input').hide();
}
});
$('input:checkbox').on('click', function(){
if($(this).prop('checked')== true) {
$(this).next('input').val('test');
$(this).next('input').show();
} else {
$(this).next('input').hide();
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">Question 1: <input type="checkbox" checked><input type="text" class="hidden-textbox"></div>
<div class="question">Question 2: <input type="checkbox"><input type="text" class="hidden-textbox"></div>
<div class="question">Question 3: <input type="checkbox"><input type="text" class="hidden-textbox"></div>
<div class="question">Question 4: <input type="checkbox" checked><input type="text" class="hidden-textbox"></div>
<div class="question">Question 5: <input type="checkbox" checked><input type="text" class="hidden-textbox"></div>另一答案
通过jquery你也可以这样做：
$('input[type="checkbox"]').change(function() {
$(this).next().find('input').toggle()
})
这是一个例子：https://jsfiddle.net/99u4mwee/2/
以上是关于如果选中复选框，则获取下一个输入[文本]的主要内容，如果未能解决你的问题，请参考以下文章