jQuery：顯示div，然后勾選1個或更多復選框

Question

我有一堆復選框，我只希望divActions中其中一個或多個復選框時， divActions是可行的.show（）。 然后，如果未選擇全部或全部取消選擇，我想隱藏divActions 。

如何才能做到這一點？

這是我的開始。

jQuery的

 $(document).ready(function() {

       var $divActions = $('#actions');
       var $clickActions = $('.contacts');

       $divActions.hide()
       $clickActions.click(function(){
       $divActions.show()


  });

html

{% for item in contacts %}
      <tr>
        <td><input type="checkbox" name="contacts" value="{{ item.id }}" class="contacts"/></td>
        <td>{{ item.full_name|capfirst }}</td>
        <td>{{ item.mobile }}</td>
        <td class="td-actions">
          <a class="btn btn-small" href="{{ item.get_delete_url }}">
          <i class="icon-trash"></i>
          </a>
        </td>
      </tr>
      {% endfor %}

Answer 1

$('.contacts').on('change', function() {
    $('#actions').toggle( $('.contacts').is(':checked') );
});

小提琴

Answer 2

嘗試使用變更處理程序：

$clickActions.on('change',function(){
     if($clickActions.is(':checked'))
         $divActions.show();
     else $divActions.hide();
});

Answer 3

1. 您需要一個函數來檢查所有復選框的狀態並根據其顯示/隱藏div。
2. 您需要將onchange -event處理程序綁定到每個復選框，才能從1運行功能。

Answer 4

在這里看看： http : //jsfiddle.net/CFazb/

碼

$("input:checkbox").change(function () {
    if ($("input:checkbox:checked").length > 0)
        $("#actions").show();
    else 
        $("#actions").hide();
})

根據您的需要更改代碼