select all checkboxes script

Destramic · May 23, 2010

hey guys im trying to make a select all checkboxes (grouped) script...my problem im having is that

var group_checked_count = $('group:checked').length;
var group_count         = $(group).length;

isnt returning the correct value as they both are returning 0

var group_checked_count should return 1...and

var group_count should return 4

it seems im doing something wrong...if anyone could point out what that is please

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/ajax/jquery/libary/jquery.js"></script>
  <script>	
function toggleCheckboxes(group, element) {

group   = $('input[name='+ group +']');
element = $('#'+ element +'');

var group_checked_count = $('group:checked').length;
var group_count         = $(group).length;

if ($(element).text() == '')
{
	if ($(group_count) / $(group_checked_count) < 1) {
		$(element).text() = 'Select All';
	}
	else{
		$(element).text() = 'Deselect All';
	}
}
}

toggleCheckboxes('sports', 'selectbutton');
</script>
</head>
<body>
<form>
<span id="selectbutton"></span>

Soccer: <input type="checkbox" name="sports" value="soccer"  /><br />
Football: <input type="checkbox" name="sports" value="football" checked /><br />
Baseball: <input type="checkbox" name="sports" value="baseball"  /><br />
Basketball: <input type="checkbox" name="sports" value="basketball"  />
</form>

</body>
</html>

Ang3l0fDeath · May 24, 2010

var input_tag=document.getElementsByTagName("input");

for (i=0; i<input_tag.length; i++){

if(input_tag.type==='checkbox'){input_tag.checked=true;}

}

// Sorry i couldnt really go though your script and fix it. But i gave you a simple select all checkboxes option above.

prestonwinfrey · May 27, 2010

function toggleCheckboxes(g, e) {
var element = $('#'+e);
var groupCount = $('input[name='+g+']').length;
var groupCheckedCount = $('input[name='+g+']').is(':checked').length;

if (element.text().length == 0) {
	if ((groupCount/groupCheckedCount) < 1) {
		element.text('Select All');
	} else{
		element.text('Deselect All');
	}
}
}

function selectAll(g, e) {
$('input[name=sports]').each(function(i) {
	$(this).attr('checked', true);
});

$('#'+e).text('Deselect All');
}

function deselectAll(g, e) {
$('input[name=sports]').each(function(i) {
	$(this).removeAttr('checked');
});

$('#'+e).text('Select All');
}

$(document).ready(function() {
toggleCheckboxes('sports', 'selectbutton');

$('#selectbutton').bind('click', function() {
	var text = $(this).text();

	if (text == 'Select All') {
		selectAll('sports', 'selectbutton');
	} else {
		deselectAll('sports', 'selectbutton');
	}
});
});

Let me bring to your attention what you were doing wrong according to:

var group_checked_count = $('group:checked').length;
var group_count = $(group).length;

In the variable group_checked_count, you're trying to explicitly look for the selector "group". This is not looking for the group variable, but looking for group as it would look for input. Also, you're passing a parameter in as group and then setting a variable named group. You reset the group parameter to the value of the group variable to "$('input[name=+ group +]');". So when you go to set group_checked_count, you're really trying to set the variable to $('$('input[name=+ group +]');:checked').length;. Because of this same reason, the variable group_count doesn't work properly. There were a few more errors in your code, but I won't elaborate on them. Take a look at the code snippet I supplied you and let me know if you have any questions.

Sign In

select all checkboxes script

Recommended Posts

Destramic

Link to comment

Share on other sites

Ang3l0fDeath

Link to comment

Share on other sites

prestonwinfrey

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information