如果选中复选框，则获取下一个输入[文本]

Question

我正在尝试 ('.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>

Answer 1

只用css就可以了

在这个 sn-p 中，它将选择一个复选框，然后选中它的兄弟类 & 将设置可见性

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>

Answer 2

选择选中的复选框

这可以在 Javascript 中通过添加 :checked 到您的选择器来完成，这将过滤您选择中的选中复选框，如下所示：

var checkedCheckboxes = $("checkbox:checked");

Answer 3

您可以结合使用 :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>

Answer 4

要检查复选框是否被选中，您需要$(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>

Answer 5

通过 jquery 你也可以这样做：

$('input[type="checkbox"]').change(function() {
  $(this).next().find('input').toggle()
})

这是一个例子： https://jsfiddle.net/99u4mwee/2/