Using jQuery, a Dropdownlist should only be visible if at least 1 checkbox is selected

Question

I have links that when clicked, select all the checkboxes or deselect them.

I also have a dropdown list that I want to be made visible only if at least one of the checkboxes are selected.

What is the best way to do this?

Should I write login inside the code that selects/deleselects them or is there a better way to do this?

Answer 1

I would have a function that sets the dropdown's visibility. I would call this function from the click handlers for each of the checkboxes and from the link's handlers -- I'm assuming that your link handlers don't merely fire a click event on each box, but set it's status. Unless you have other behavior to trigger firing the click event on each checkbox will be very expensive. In your function that set's visiblity, use a test to see if the number of checked boxes is greater than 0 as the new state for the visibility.

function setDDVisibility() {
   var isVisible = $('.checkbox-class-selector:checked').length > 0;
   if (isVisible) {
      $('#ddl').show();
   }
   else {
      $('#ddl').hide();
   }
}

$('.checkbox-class').click( function() {
   ... do stuff ...
   setDDVisibility();
   return false;
});

$('.link-selector').click( function() {
   ...set up checkboxes...
   setDDVisibility();
   return false;
});