我尝试('.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>
答案 0 :(得分:4)
只能使用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>
答案 1 :(得分:1)
这可以在Javascript中完成,只需在您的选择器中添加:checked
即可过滤选中的已选中复选框,如下所示:
var checkedCheckboxes = $("checkbox:checked");
答案 2 :(得分:1)
您可以结合使用:已选中和相邻的兄弟选择器来实现您的目标。就这样:
.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>
答案 3 :(得分:1)
要检查是否选中了复选框,您需要$(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>
答案 4 :(得分:0)