javascript - jQuery：显示 div 然后勾选 1 个或多个复选框

Question

我有一堆复选框，我只想在选中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();
})

根据您的需要更改代码