jquery UI & jQuery

[droctoganapus86]

Hello, i have a slight problem with the jqury UI and some jquery code.
i have a couple of checkboxes, i want that when you click the first checkbox, the others are unchecked, and vica verca. I have this html :

<div class="buttonset">
	<input name="all" id="all" type="checkbox" checked="checked" /><label for="all" title="All">All</label>
	<input name="audio" id="audio" type="checkbox" /><label for="audio" title="Audio">Audio</label>
	<input name="video" id="video" type="checkbox" /><label for="video" title="Video">Video</label>
	<input name="apps" id="apps" type="checkbox" /><label for="apps" title="Programma's">Apps</label>
</div>

and this piece of jquery:

$(function(){
	$('.pirate input[type="checkbox"]#all').click(function(){
		$('.pirate input[type="checkbox"]:not(#all)').attr('checked', false);
	});
	$('.pirate input[type="checkbox"]:not(#all)').click(function(){
		$('.pirate input[type="checkbox"]#all').attr('checked', false);
	});
});

this works fine, but when i call

$('.buttonset').buttonset();

it suddenly stops working. any ideas how to fix this?

 

[misson]

What does the error console say? "It suddenly stops working" tells us almost nothing. When asking for help, describe what you expect to happen and what actually happens, including any error messages.

Did you include the jQuery UI script? Does it have the Button widget?

 

[descalzo]

<div class="buttonset">
	<input name="all" id="all" type="checkbox" checked="checked" /><label for="all" title="All">All</label>
	<input name="audio" id="audio" type="checkbox" /><label for="audio" title="Audio">Audio</label>
	<input name="video" id="video" type="checkbox" /><label for="video" title="Video">Video</label>
	<input name="apps" id="apps" type="checkbox" /><label for="apps" title="Programma's">Apps</label>
</div>

<!-- ADD A BUTTON TO TEST THE ACTUAL STATES -->

<button name="test" id="test" />TEST</button>

and this piece of jquery:

$(function(){
	$('.pirate input[type="checkbox"]#all').click(function(){
		$('.pirate input[type="checkbox"]:not(#all)').attr('checked', false);
	});
	$('.pirate input[type="checkbox"]:not(#all)').click(function(){
		$('.pirate input[type="checkbox"]#all').attr('checked', false);
	});
        // HOOK BUTTON TO CODE THAT SHOWS REAL STATE OF CHECKBOXES
        $("#test").click( function(){
              var mess =;
              var mess = "Boxes: "  + "all: " + jQuery("#all").attr('checked' ) + 
                "\n audio: "  + jQuery("#audio").attr('checked' ) +
               "\n video: "  + jQuery("#video").attr('checked' ) +
                "\n apps: "   + jQuery("#apps").attr('checked' ) ;
               alert( mess ) ;
        });
});

Learn how to debug. Test to see what is going on.

You will find out that the underlying checkboxes are operating correctly. The jQuery display just does not reflect the programatically induced change. It is not automatic.

Look at the documentation:

http://jqueryui.com/demos/button/

Look the the methods available to buttons.

You want to refresh the display. Amazing!!!

There is a method called "refresh" which the docs say:

Refreshes the visual state of the button. Useful for updating button state after the native element's checked or disabled state is changed programatically.

Sounds like what you want.

So, adjust your click handler to update the display of all the buttons. Since you grouped them with buttonset, try:

$(function(){
	$('.pirate input[type="checkbox"]#all').click(function(){
		$('.pirate input[type="checkbox"]:not(#all)').attr('checked', false);
                $('.buttonset').buttonset().refresh() ; // REFRESH DISPLAY
	});
	$('.pirate input[type="checkbox"]:not(#all)').click(function(){
		$('.pirate input[type="checkbox"]#all').attr('checked', false);
                $('.buttonset').buttonset().refresh() ; // REFRESH DISPLAY
	});
});

And miracle! It works! (at least on my test page).

P.S. A selector like $('.pirate input[type="checkbox"]#all') is horribly obscure and inefficient. ID's should be unique, so that can be replaced by $('#all')

 

[droctoganapus86]

ok, my question wasn't as smart as i thought. but my problem is fixed now, thanks to descalzo.

 

[vekou]

P.S. A selector like $('.pirate input[type="checkbox"]#all') is horribly obscure and inefficient. ID's should be unique, so that can be replaced by $('#all')

Agreed. It also makes the code shorter, thus smaller file size, thus faster page loads.