対応するチェックボックスがチェックされている場合、テキストボックスが表示されます。

Question

テキストボックスとそれに対応するチェックボックスのリストがあります。私はチェックボックスがユーザによってチェックされているそれらのテキストボックスのみを可視にしたい。これどうやってするの？

<input type="text" name="album_text[]" id="album_text" class="album_text" /> 
<input type="text" name="album_text[]" id="album_text" class="album_text" /> 
<input type="text" name="album_text[]" id="album_text" class="album_text" /> 

<input name="album_checkbox[]" type="checkbox" id="album_checkbox" value="' . $res. '"> 
<input name="album_checkbox[]" type="checkbox" id="album_checkbox" value="' . $res. '"> 
<input name="album_checkbox[]" type="checkbox" id="album_checkbox" value="' . $res. '"> 

は今のところ、更新ボタンをクリックするだけで、すべてのテキストボックスにかかわらず、チェックボックスの目に見えるようになる：

$("#album_edit").click(function() { 


        $(".album_text").show(); 



     }); 

EDIT： texboxesとチェックボックスは、実行時に動的に生成されます。

Answer 1

ここで働いている例、http://jsfiddle.net/JmqLH/

HTML：

<span class='textinput'> 
    <input type="text" name="album_text[]" id="album_text1" class="album_text" /> 
    <input type="text" name="album_text[]" id="album_text2" class="album_text" /> 
    <input type="text" name="album_text[]" id="album_tex3t" class="album_text" /> 
</span> <br> 
<span class='chkbx'> 
    <input name="album_checkbox[]" type="checkbox" id="album_checkbox1" value="' . $res. '"> 
    <input name="album_checkbox[]" type="checkbox" id="album_checkbox2" value="' . $res. '"> 
    <input name="album_checkbox[]" type="checkbox" id="album_checkbox3" value="' . $res. '"> 
</span> 

JS：

$('span.chkbx input').hide(); 

$('.album_text').click(function(){ 
    var indexme = $(this).prevAll().length; 
    $('.chkbx input').eq(indexme).show(); 
}); 

アップデート1：http://jsfiddle.net/JmqLH/1/

アップデート2：http://jsfiddle.net/JmqLH/2/はJSに二つの入力種類をスワップ...

更新3：http://jsfiddle.net/JmqLH/3/ HTMLの2つの入力グループを入れ替えました...

Answer 2

まず、複数の要素に同じidを使用しないでください。代わりにclassセレクタを使用できます。 album_text_1とalbum_checkbox_1のような対応するidを割り当てることができます。これにより、次のステップがエラーを起こしにくくなります。

var checkboxes = $('.album_checkbox'), 
    textFields = $('.album_text'); 

checkboxes.change(function() { 
    // Eg. replace album_checkbox_1 with album_text_1 
    var textField = $('#' + this.id.replace(/^_checkbox_/, '_text_')); 
    if(this.checked) { 
     textField.show(); 
    } else { 
     textField.hide(); 
    } 
}); 

あなたはユニークなid Sを使用することはできません（あなたがマークアップのコントロールを持っていない）場合は、代わりに.index()と.eq()を使用することができます。チェックボックスがcheckedある場合

第二に、あなたがチェックする必要がありますこれは、要素の各セットの順序が一致していると確信している場合のみです。だから、上記のようなコードになりますが、と6行目の交換：あなたは、「album_text」$（あるとき、それらのすべてが同じIDとclass..soを持っているので、

var textField = textFields.eq(checkboxes.index(this)); 

Answer 3

ははい、彼らは、意志）、すべてのテキストボックスが渡され、表示されます。テキストボックスをチェックボックスに一意に結び付ける/特定するためのメカニズムを見つけて、そのユニークなID /クラスをjqueryコードで使用してテキストボックスを表示する必要があります。