CODEWITHSUNDEEP
javascriptjquery
GrantU
GrantU

Reputation: 6555

jQuery: Showing div then 1 or more checkboxes are ticked

I have a bunch of checkboxes I only want divActions to be viable .show() when 1 or more of these checkboxes are ticked. I then want to hide divActions if none or all are deselected.

How can this be done?

This is my start.

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 %}

Upvotes: 0

Views: 46

Answers (4)

BeNdErR
BeNdErR

Reputation: 17927

have a look here: http://jsfiddle.net/CFazb/

code

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

change the code accordingly to your needs

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74420

Try using change handler:

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

Upvotes: 2

adeneo
adeneo

Reputation: 318232

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

FIDDLE

Upvotes: 3

oluckyman
oluckyman

Reputation: 3886

  1. You need a function to check state of all the checkboxes and show/hide div depending on it.
  2. You need to bind the onchange-event handler to the each checkbox to run function from 1.

Upvotes: 1

Related Questions