2013-03-25 20 views
5

Tôi biết đây là một câu hỏi lặp đi lặp lại, nhưng tôi không thể làm cho nó chạy. Tôi đã thử tất cả các giải pháp tôi tìm thấy ở đây trong SO và googling ...Hiển thị/ẩn textfile tùy thuộc vào lựa chọn của nút radio

Tôi có biểu mẫu nút radio này trong trang của mình. Điều tôi muốn là khi người dùng chọn tùy chọn 'chỉ một người tham dự', trường văn bản chỉ xuất hiện cho tùy chọn này. Nếu người dùng chọn một số khác thì nó sẽ biến mất.

Normal form

Khi người sử dụng chọn chỉ có một tùy chọn, hộp văn bản xuất hiện.

expanded form

Tôi đã thử làm với javascript. Tôi sử dụng đoạn mã này

<script> 
    $(document).ready(function() 
     $("#send_to_one").hide(); 
     $("input:radio[name="people"]").change(function(){ 
      if(this.checked){ 
      if(this.value =='one'){ 
       $("#send_to_one").show() 
      }else{ 
       $("#send_to_one").hide(); 
      } 
     } 
    } 
    }); 
</script> 

mã của hình thức là

<div id="send_to"> 
    <input type="radio" id="send_poll" name="people" value="all" checked="checked">all the attendees</br>  
    <input type="radio" id="send_poll" name="people" value="one" >only one attendee<br/> 
    <div id="send_to_one"> 
     <label>Write the attendee's name: </label><input type="text" id="attendeename"><br/><br/> 
    </div> 
    <input type="radio" id="send_poll" name="people" value="group">a group of attendees</br>    
    </div>  

Tôi đã kiểm tra rằng các tập tin javascript được nạp. Tôi cũng đã thử đặt mã javascript bên trong tệp html.erb trong đó biểu mẫu nằm trong tệp .js được phân tách và trong phần <head></head> của application.htm.erb, nhưng không có may mắn. Tôi cần phải đặt từng phần mã vào đâu để hoạt động?

Sử dụng Rails 3.0.4, Ruby 1.8.9. Tôi cũng đang sử dụng JQuery

+0

(OT) '
'! ='
'và' '! =' ' –

+0

khỏi đầu của tôi:' $ ("input: radio [name =" people "]"). 'Nên là' $ ("đầu vào: radio [name = 'people'] ").' – DVM

Trả lời

4

LIVE DEMO

HTML:

<div id="send_to"> 
    <input type="radio" id="send_poll" name="people" value="all" checked="checked" />all the attendees<br/>  
    <input type="radio" id="send_poll" name="people" value="one" />only one attendee<br/> 
    <div id="send_to_one"> 
     <label>Write the attendee's name: </label><input type="text" id="attendeename" /><br/><br/> 
    </div> 
    <input type="radio" id="send_poll" name="people" value="group" />a group of attendees<br/>    
</div> 

JQ:

$(document).ready(function(){ 

    $("#send_to_one").hide(); 

    $("input:radio[name='people']").change(function(){ 

      if(this.value == 'one' && this.checked){ 
       $("#send_to_one").show(); 
      }else{ 
       $("#send_to_one").hide(); 
      } 

    }); 

}); 
+1

Câu trả lời của bạn đã giúp, cảm ơn bạn :) – itziki

1
$(document).ready(function() { 
    $("#send_to_one").hide(); 
    $("input:radio[name='people']").change(function(){ 
     if(this.checked){ 
      if(this.value =='one'){ 
       $("#send_to_one").show() 
      }else{ 
       $("#send_to_one").hide(); 
      } 
     } 
    }); 
}); 

Mã của bạn đã đúng, nhưng thiếu dấu ngoặc nhọn, dấu ngoặc và dấu ngoặc kép. Bạn đang sử dụng bất kỳ hình thức nào của trình soạn thảo javascript thông minh? Bởi vì bạn thực sự nên ...

http://jsfiddle.net/7yt2A/

Các vấn đề liên quan