2015-06-22 49 views
2

在我的Rails應用程序中,記錄列表顯示在每條記錄前面的複選框以及用於選擇所有記錄的複選框。我想向文本區域添加或刪除parents_contact_no數據。在選擇複選框時,相應記錄的parents_contact_no應該被添加到以逗號分隔的文本區域中,並且在取消選擇相應記錄的複選框時,相應記錄的parents_contact_no應該被移除。 如果選中全選複選框,則parent_contact_no中的所有記錄都應添加到文本區域。其中數字已在選擇/取消選擇複選框顯示添加/刪除textarea中的值在rails中

文本區域被dispayed

<div class="field"> 
    <%= f.label :sent_to %><br> 
    <div class="result_div"> 
     <%= f.text_field :sent_to %> 
    </div> 
    </div> 

.html.erb文件

<% if @contact.empty? %> 
    <h4>No records to display</h4> 
<% else %> 

    <table> 
     <thead> 
     <tr> 
      <th><%= check_box_tag "contact_nos[]", @contact.map(&:parents_contact_no) %></th> 
      <th>Roll no</th> 
      <th>Class</th> 
      <th>Section</th> 

      <th>Father name</th> 

      <th>Parents contact no</th> 

      <th colspan="3"></th> 
     </tr> 
     </thead> 

     <tbody> 
     <% @contact.each do |student| %> 
      <tr> 
      <td><%= check_box_tag "contact_no[]", student.parents_contact_no %></td> 
      <td><%= student.roll_no %></td> 
      <td><%= student.class_name %></td> 
      <td><%= student.section %></td> 

      <td><%= student.father_name %></td> 

      <td><%= student.parents_contact_no %></td> 

      <td><%= link_to 'Show', student %></td> 
      <td><%= link_to 'Edit', edit_student_path(student) %></td> 
      <td><%= link_to 'Destroy', student, method: :delete, data: { confirm: 'Are you sure?' } %></td> 
      </tr> 
     <% end %> 
     </tbody> 
    </table> 
<% end %> 

如何通過jQuery/JavaScript的做到這一點?

我已經添加了一個腳本,這是一個複選框的變化將添加/刪除文本區域中的聯繫人。我面臨的問題是如何獲取當前複選框的值並將其放入文本區域。

<script> 
    $(document).ready(function() { 
    $('[id^=contact_no_]').change(function() { 
     alert("checked"); 
     alert($('input["name=contact_no[]"]:checked').value()); 
     $('#message_message_text').val("Hello"); 

    }); 
    }); 
</script> 

回答

1

我得到這個問題的答案,爲我工作的腳本是遵循

<script> 
    $(document).ready(function() { 
    $('[id^=contact_no_]').change(function() { 
     //alert("checked"); 
     var checkedValues = $('input:checkbox:checked').map(function() { 
    return this.value; 
}).get().join(", "); 
     //alert(checkedValues); 
     $('#message_sent_to').val(checkedValues); 

    }); 
    }); 
</script> 

闡釋:既然我們要抓住複選框的這將是在表單中的ID第一個記錄爲contact_no_1,第二個記錄爲contact_no_2,依此類推。所以我們使用id = contact_no_這樣的正則表達式來獲得id,並且在這個方面我們調用了一個可以用於select和unselect的更改函數。比起我們在變量checkedValues中取得所有選中的複選框的值,並在逗號的基礎上加入值。最後,我們將checkeValues變量內容添加到textarea。

相關問題