我正在尝试 ('.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>
关于javascript - 如果复选框被选中,获取下一个输入[文本],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49725069/