これらのフォームフィールドをJQueryで更新する最も簡単な方法は何ですか？

Question

I次のHTMLフォームがあります。

<form> 
<input type="checkbox" name="fruits[]" value="apples" /><input type="text" value="false" /><br/> 
<input type="checkbox" name="fruits[]" value="oranges" /><input type="text" value="false" /><br/> 
<input type="checkbox" name="fruits[]" value="grapes" /><input type="text" value="false" /><br/> 
<input type="checkbox" name="fruits[]" value="bananas" /><input type="text" value="false" /><br/> 
</form> 

は今、私はいくつかのJavaScriptを書きたいの/ jQueryのように私がチェックするか、チェックボックスのチェックを外したときに、対応するテキストボックスが表示されていること「true」または「false」。 JavaScriptを変更せずに果物を追加するのは簡単なはずです。

優雅な方法でこれを行うにはどうすればよいですか？

Answer 1

これは純粋なjavascriptでは簡単ですが、実際にはjQueryは必要ありません。各チェックボックスのonchangeイベントに、テキストフィールドを更新する関数を割り当てるだけで、チェックボックスとテキストフィールドの間に関係がなければなりません。関数は次のようになります。

// assign to onchange like: onchange="updateTextField(this)" 
function updateTextField(cb) { 
    // this assumes that the corresponding text field has id with the same name as the 
    // checkbox value 
    var tf = document.getElementById(cb.value); 
    tf.value = cb.checked.toString(); 
} 

Answer 2

チェックボックスとテキストフィールドの間に何らかの関係が必要です。このようなものはjQueryを使って動作し、非常に拡張可能です。

<form> 
    <input type="checkbox" value="apples" /><input type="text" value="false" for="apples"/><br/> 
    <input type="checkbox" value="oranges" /><input type="text" value="false" for="oranges" /><br/> 
    <input type="checkbox" value="grapes" /><input type="text" value="false" for="grapes" /><br/> 
    <input type="checkbox" value="bananas" /><input type="text" value="false" for="bananas"/><br/> 
</form> 

<script> 
$(function() { 
    $(":checkbox").click(function() { 
     if ($(this).attr('checked')) { 
      $('input[for$="' + $(this).val() + '"]').val("true"); 
     } else { 
      $('input[for$="' + $(this).val() + '"]').val("false"); 
     } 
    }) 
}) 
</script>