如果選中此復選框，則獲取下一個輸入[文本]

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完成

在此代碼段中，它將選中一個復選框，然后選中該復選框，然后將其同級並設置可見性

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/