15 January, 2009

jQuery hide unchecked Check Boxes

In my scenario a user can select people to add to a list (using checkboxes). The update is done via jQuery $post so there is no refresh. In order to make it seem more fluent I need to hide all the people that are not checked making it seem as though there was a full update. *a full update happens when the user refreshes the page.

So the solution: use jQuery to hide checkboxes that are not checked.


var divId = "yourDivID";

$("#"+divId+" input:checkbox").not(":checked").each(function(){
$(this).next().hide();
$(this).hide();
});


the text next to the checkbox is inside a span tag. This allows it to be recognised correctly when using .next()

jQuery Check Boxes all Checked Values from Div

Something super awesome with jQuery. The ability to get all the values of checkboxes that are checked within a specific div.

//divid is your unique DIV id
$("#divId input:checked").each(function(){
alert($(this).val());
});

As simple as that! We get all the checked ckeckbxes from divId and then alert each of their values. Just remember to leave a space between the divId and input.
Enjoy