해당 확인란을 선택하면 텍스트 상자가 표시되어야합니다.

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(); 



     }); 

편집 : 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의 두 입력 그룹을 바꿨습니다 ...

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의를 사용할 수 없습니다 (마크 업을 제어 할 수 없습니다) 경우 대신 .index() 및 .eq()를 사용할 수있는 체크 박스가 checked 경우

둘째, 당신은 확인해야합니다 각 요소 집합의 순서가 일치하는지 확신 할 수 있어야합니다. 그래서 비슷한 위의 코드 만 맞춰 6 대체 될 것이다 : 당신은 $이 (때

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

Answer 3

예, 그들은, 그들 모두 있기 때문에 동일한 ID와 class..so있을 것이다 ". album_text"), 모든 텍스트 상자가 전달되어 표시됩니다. 텍스트 상자를 체크 상자에 고유하게 묶거나 식별하는 메커니즘을 찾아 jquery 코드에서 해당 고유 ID/클래스를 사용하여 텍스트 상자를 표시해야합니다.