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

LVL 16
ellandrdAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Albert Van HalenConnect With a Mentor Analyst 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
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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
 
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
 
ventaurConnect With a Mentor Commented:
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
All Courses

From novice to tech pro — start learning today.