jQuery: Beginning question (didn't find answer elsewhere)

**graedus_dave** · Feb 22, 2008, 12:26

Hi,

Just started using jQuery this morning and love it. I would be shocked if this hasn't been asked before but I have Googled and searched for about an hour and haven't found anything.

I have a checkout system. I have a div for shipping information, and a checkbox above it that allows a user to specify in-store pickup. When you check the checkbox, the div with shipping information disappears. It works great and looks even better!

The functionality works exactly as it should -- my only problem is, the checkbox doesn't get checked!

Here's my code:

Code:

$(document).ready(function(){
	   $("#CheckoutChurchPickup").toggle(function(){
	     $("#shippingInformation").animate({ height: 'hide', opacity: 'hide' }, 'fast');
	   },function(){
	     $("#shippingInformation").animate({ height: 'show', opacity: 'show' }, 'fast');
	   });
	 });

I have tried adding $("#CheckoutChurchPickup").attr('checked', 'checked');, $("#CheckoutChurchPickup").checked = true; and other things I've found to no avail. The functionality works great, but the element still appears unchecked. What can I do.

Thank you very much!

**SoulScratch** · Feb 22, 2008, 12:36

.attr('checked', true) perhaps? And are you sure you have the right ID on the input, and you're doing this after the dom has been loaded?

**graedus_dave** · Feb 22, 2008, 12:56

Thanks for the reply!

I had tried that also, and it didn't work. I know I have the ID right and I'm doing it after the DOM loads because adding this:

Code:

$("#CheckoutChurchPickup").attr('disabled', 'disabled');

...works as expected (the shipping information box disappears, and then the checkbox element becomes disabled).

However, replacing that line with this:

Code:

$("#CheckoutChurchPickup").attr('checked', 'checked');

provides no dice.

**graedus_dave** · Feb 22, 2008, 13:39

BTW, I see you're from MD also. Enjoying the weather this week?

**sequill** · Feb 22, 2008, 13:54

I'm with SoulScratch on the .attr("checked",true)

Code:

<html>                                                                  
 <head>                                                                  
 <script type="text/javascript" src="javascript/jquery.js"></script>          
 <script type="text/javascript">                                         

function toggleCheckboxes()
{
	 if($("#isChecked").attr("checked") == true)
	 {
		  $("#isChecked").attr("checked",false);
		  $("#isNotChecked").attr("checked",true);
	 }
	 else
	 {
		  $("#isChecked").attr("checked",true);
		  $("#isNotChecked").attr("checked",false);
	 }
 } 
 </script>                                                               
 </head>                                                                 
 <body>           
        Start Checked:<input type="checkbox" id="isChecked" value="100" checked>   <br>                                            
		Start Unchecked:<input type="checkbox"id="isNotChecked"  value="200">  <br>
		<input type="button" onClick="toggleCheckboxes()" value="uncheck/check";>
                                        
 </body>                                                                 
 </html>

**graedus_dave** · Feb 22, 2008, 14:22

That works with a different attribute --

Code:

$("#CheckoutChurchPickup").attr("disabled",true);

works but

Code:

$("#CheckoutChurchPickup").attr("checked",true);

doesn't?

Is there anything that could be causing 'checked' to not be recognized?

I even extracted it from my site and put it in a test file just to make sure. Here is the full code:

Code:

<html>                                                                  
	<head>                                                                  
		<script type="text/javascript" src="jquery.js"></script>
	</head>
	
	<body>

	<h2>Shipping Information</h2>
	<script type="text/javascript">
		$(document).ready(function(){
	   $("#CheckoutChurchPickup").toggle(function(){
	     $("#shippingInformation").animate({ height: 'hide', opacity: 'hide' }, 'fast');
	     $("#CheckoutChurchPickup").attr("checked",true);
	   },function(){
	     $("#shippingInformation").animate({ height: 'show', opacity: 'show' }, 'fast');
	   });
	 });
	</script>
	<p>
		<input type="checkbox" name="data[Checkout][church_pickup]" style="float: left;"  id="CheckoutChurchPickup" /> 
		<label for="CheckoutChurchPickup">I attend RCC and would like to pick my order up on Sunday morning</label>
	</p>
	<div id="shippingInformation">
		<p>form was here...</p>
	</div>
	
</body>
</html>

.attr("disabled",true) works; .attr("checked",true) doesn't?

I also thought it might be something with IE doing something crazy, but I get the same results in Firefox.

**SoulScratch** · Feb 22, 2008, 15:26

toggle: function() {
// Save reference to arguments for access in closure
var args = arguments;

return this.click(function(event) {
// Figure out which function to execute
this.lastToggle = 0 == this.lastToggle ? 1 : 0;

// Make sure that clicks stop
event.preventDefault();

// and execute the function
return args[this.lastToggle].apply( this, arguments ) || false;
});
},

I think the line in bold is the cause. It prevents an action from being taken (in this case, the check). Maybe just have a custom toggle function without this? Hmm

**sequill** · Feb 22, 2008, 15:31

Actually the .attr("checked",true) is working.
Stick an alert box right after it and you can see the check mark

$("#CheckoutChurchPickup").attr("checked",true);
alert("pause");

It looks like when it exits out of the toggle function it's resetting to unchecked.

Avoiding the problem might be easier than solving it

Code:

<script type="text/javascript">
    $(document).ready(function(){
	   $("#CheckoutChurchPickup").click(function(){
		 
		 if( $("#CheckoutChurchPickup").attr("checked")==true)
		 {	  
	    	         $("#shippingInformation").animate({ height: 'show', opacity: 'show' }, 'fast');  
		 }
		 else
		 {
	                 $("#shippingInformation").animate({ height: 'hide', opacity: 'hide' }, 'fast');
		 }	   
  
	   });
	 });
	</script>

**SoulScratch** · Feb 22, 2008, 15:32

This is probably a very, very dirty fix that could probably be avoided by correctly using the right methods.. but i think i found a way to get it to work..

Code:

	    $.fn.toggleTwo = function() {
		var args = arguments;
		return this.click(function(event) {
		    this.lastToggle = 0 == this.lastToggle ? 1 : 0;
		    // and execute the function
		    return args[this.lastToggle].apply( this, arguments );
		});
	    }

Code:

	$(document).ready(function(){
	    $('#CheckoutChurchPickup').toggleTwo(function() {
		$('#shippingInformation').animate({height:'hide', opacity:'hide'}, 'fast');
	    }, function() {
		$('#shippingInformation').animate({height:'show', opacity:'show'}, 'fast');
	    });
	});

I removed the line that prevented the default action from taking place, and false is no longer returned from the anon. function inside.

**graedus_dave** · Feb 22, 2008, 16:03

sequill, I got it working with your code. Thank you so much!

And SoulScratch, that's a good workaround -- thank you for your help also.

The SitePoint Forums have moved.

User Tag List

Thread: jQuery: Beginning question (didn't find answer elsewhere)

Thread Tools

Display

jQuery: Beginning question (didn't find answer elsewhere)

Bookmarks

Bookmarks

Posting Permissions