Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 508
  • Last Modified:

get checked checkbox

I have 5 checkboxes:

<input type="checkbox" name="places_of_interest_ids[]" id="places_of_interest_ids" value="1"> None
<input type="checkbox" name="places_of_interest_ids[]" id="places_of_interest_ids" value="2"> Option 1
<input type="checkbox" name="places_of_interest_ids[]" id="places_of_interest_ids" value="3"> Option 2
<input type="checkbox" name="places_of_interest_ids[]" id="places_of_interest_ids" value="4"> Option 3
<input type="checkbox" name="places_of_interest_ids[]" id="places_of_interest_ids" value="5"> Option 4

If the user checked None, then uncheck all other options, leaving None checked.  

If the user checks a box other than None, check the selected checkbox and uncheck None.


However I cant get it working.


$("input:checkbox[name=places_of_interest_ids]").bind("click",function()
{
	if($("input:checkbox[name=places_of_interest_ids]").is(":checked") && $("input:checkbox[name=places_of_interest_ids]").val() == 1) 
	{
		$("input:checkbox[name=places_of_interest_ids]").each(function() 
		{ 
			$("input:checkbox[name=places_of_interest_ids]").attr("checked",false); 
		}); 
					
		$("input:checkbox[name=places_of_interest_ids]").attr("checked",true);
	}
	else if($("input:checkbox[name=places_of_interest_ids]").is(":checked") && $("input:checkbox[name=places_of_interest_ids]").val() > 1)
	{
		$$("input:checkbox[name=places_of_interest_ids]:first").attr("checked",false); 
	}
},function(){});

Open in new window

0
ellandrd
Asked:
ellandrd
2 Solutions
 
Shahzad Fateh AliWeb Solutions Architect & Technical Project Manager- VentureDive (Pvt) LtdCommented:
$(function(){
 $('.places_of_interest_ids').click(function(){
    $('.places_of_interest_ids').removeAttr('checked');
    $(this).attr('checked','checked');
 });
});

Open in new window


Change id attr to class
<input type="checkbox" name="places_of_interest_ids[]" class="places_of_interest_ids" value="1"> None
<input type="checkbox" name="places_of_interest_ids[]" class="places_of_interest_ids" value="2"> Option 1
<input type="checkbox" name="places_of_interest_ids[]" class="places_of_interest_ids" value="3"> Option 2
<input type="checkbox" name="places_of_interest_ids[]" class="places_of_interest_ids" value="4"> Option 3
<input type="checkbox" name="places_of_interest_ids[]" class="places_of_interest_ids" value="5"> Option 4

Open in new window

0
 
ventaurCommented:
First, I suggest you have unique ids for your elements; it will make things easier. However, here is some code that should do the trick regardless of your ids.

$('input:checkbox[name^=places_of_interest_ids]').click(function () {
	var $this = $(this);
	if ($this.is(':checked')) {
		if ($this.val == '1') {
			$('input:checkbox[name^=places_of_interest_ids][val!=1]').attr('checked', false);
		} else {
			$('input:checkbox[name^=places_of_interest_ids][val=1]').attr('checked', false);
		}
	}
});

Open in new window

0
 
ellandrdAuthor Commented:
Hi

Thanks for the comments.

Have these solutions been tested? The reason I ask is I'm not in the office at the moment and won't be for another few hours. If they have been tested and still work I can accept solution...
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
ventaurCommented:
With a couple minor typo adjustments, mine works as below (tested).

$('input:checkbox[name^=places_of_interest_ids]').click(function (e) {
	var $this = $(this);
	if ($this.is(':checked')) {
		if ($this.val() == '1') {
			$('input:checkbox[name^=places_of_interest_ids][value!=1]').attr('checked', false);
		} else {
			$('input:checkbox[name^=places_of_interest_ids][value=1]').attr('checked', false);
		}
	}
});

Open in new window

0
 
ellandrdAuthor Commented:
this line:

$this.val()

is returning:

object: [Object]

0
 
ventaurCommented:
With the check boxes you listed (I copied and pasted them) on an otherwise blank HTML page and my script block, all works without issue. Note, I am using jQuery 1.4.2.

Perhaps there is something else on the page with a name that begins with 'places_of_interest_ids'?
0
 
ellandrdAuthor Commented:
Can you post all your code here please?
0
 
Albert Van HalenAnalyst developerCommented:
I'd suggest having the markup like this
<input type="checkbox" name="places_of_interest_ids[]" id="none" value="1"> None
<input type="checkbox" name="places_of_interest_ids[]" class="other" value="2"> Option 1
<input type="checkbox" name="places_of_interest_ids[]" class="other" value="3"> Option 2
<input type="checkbox" name="places_of_interest_ids[]" class="other" value="4"> Option 3
<input type="checkbox" name="places_of_interest_ids[]" class="other" value="5"> Option 4

Open in new window

then use the following code...
$(function() {
    $("#none").click(function() {
        if(this.checked)
            $(".other").attr("checked", false);
    });
    $(".other").click(function() {
        if(this.checked)
            $("#none").attr("checked", false);
    });
});

Open in new window

Check a working example here : http://jsfiddle.net/SDZeE/
0
 
ventaurCommented:
Here is my test page that checks out okay.

<html>
<head>
	<title>Test</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
	<input type="checkbox" name="places_of_interest_ids[]" id="places_of_interest_ids" value="1"> None
	<input type="checkbox" name="places_of_interest_ids[]" id="places_of_interest_ids" value="2"> Option 1
	<input type="checkbox" name="places_of_interest_ids[]" id="places_of_interest_ids" value="3"> Option 2
	<input type="checkbox" name="places_of_interest_ids[]" id="places_of_interest_ids" value="4"> Option 3
	<input type="checkbox" name="places_of_interest_ids[]" id="places_of_interest_ids" value="5"> Option 4
	
	<script type="text/javascript">
		$('input:checkbox[name^=places_of_interest_ids]').click(function (e) {
			var $this = $(this);
			if ($this.is(':checked')) {
				if ($this.val() == '1') {
					$('input:checkbox[name^=places_of_interest_ids][value!=1]').attr('checked', false);
				} else {
					$('input:checkbox[name^=places_of_interest_ids][value=1]').attr('checked', false);
				}
			}
		});
	</script>
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now