Jump to content

Find any selected radio/checkbox

Spunky

By Spunky
in JavaScript

 Share

Recommended Posts

Spunky Member

Spunky

Posted
  • Author
Posted (edited)

Yea, I can get your code to work perfectly, when I implement it into mine though, nothing. I don't understand though, it was working before with the older version, it only took a couple minor changes to switch. I must be stupidly missing something small.

Edited by Spunky
Link to comment
Share on other sites
Spunky Member

Spunky

Posted
  • Author
Posted

Ok further testing shows the code does work. If I paste your form directly into my HTML the code works fine. Because remember, the HTML that displays my radio buttons and check boxes are all dynamically changed. So it must have something to do with that? Still doesn't make sense why the older version was working.

Link to comment
Share on other sites
Spunky Member

Spunky

Posted
  • Author
Posted

Alright. With your mock form in place. When I click mine nothing happens. But I have it alert the points now as well. When I click on your forms buttons it alerts the correct points. Only once I have clicked the forms buttons does it then show the total points in my span, including the points from my own buttons...so..something is out of whack.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

here you are try this

     $('form').on('click', 'input[type=checkbox], [type=radio]', function()        {        var InputValue=0;        $('input[type=checkbox]:checked, [type=radio]:checked').each(function()            {            InputValue = parseInt(InputValue)+parseInt($(this).val());            });        //alert(InputValue)        $('#total span').html(InputValue);        });

i had dynamically created inputs before the event was applied, which works fine, but when i created the iput after event was applied it failed, the new code works if dynamically created before or after.

Link to comment
Share on other sites
Spunky Member

Spunky

Posted
  • Author
Posted
here you are try this 
  	$('form').on('click', 'input[type=checkbox], [type=radio]', function()		{		var InputValue=0;		$('input[type=checkbox]:checked, [type=radio]:checked').each(function()			{			InputValue = parseInt(InputValue)+parseInt($(this).val());			});		//alert(InputValue)		$('#total span').html(InputValue);		});

i had dynamically created inputs before the event was applied, which works fine, but when i created the iput after event was applied it failed, the new code works if dynamically created before or after.

Using the document I created with purely your code, HTML and the Jquery, that was working before, I pasted this new code in and it too is not working. :facepalm: Nothing happening. Nothing erroring. Nothing. This is getting frustrating lol. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="jquery-2.0.1.min.js"></script><!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>--><!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> OLD VERSION --><!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>--><script type="text/javascript">/*<![CDATA[*//*---->*///$(function()    //{       $('form').on('click', 'input[type=checkbox], [type=radio]', function()	    {	    var InputValue=0;	    $('input[type=checkbox]:checked, [type=radio]:checked').each(function()		    {		    InputValue = parseInt(InputValue)+parseInt($(this).val());		    });	    //alert(InputValue)	    $('#total span').html(InputValue);	    });			       //});   /*--*//*]]>*/</script><style type="text/css">#total {border:1px solid #000; float:left; width:100px; margin: 20px; padding:5px;}</style></head><body><form action="" method="post"><input class="formBuzType" type="radio" name="buztype" value="0"><label>0</label> <br>  <input class="formBuzType" type="radio" name="buztype" value="8"><label>8</label> <br>  <input class="formBuzType" type="radio" name="buztype" value="1"><label>1</label><br>  <input class="formBuzType" type="radio" name="buztype2" value="0"><label>0</label> <br>    <input class="formBuzType" type="radio" name="buztype2" value="5"><label>5</label> <br>  <input class="formBuzType" type="radio" name="buztype2" value="3"><label>3</label><br>  <input type="checkbox" name="addthis" value="2" /><label>2</label><br />    <input type="checkbox" name="addthis" value="4" /><label>4</label><br />	 <input type="checkbox" name="addthis" value="-6" /><label> - 6</label><br />	  <!--<input type="checkbox" name="addthis" onclick="checkChecked(this)" value="-6" /><label> - 6</label><br />-->				    </form><div id="total">Total: <span> </span></div></body></html>

Link to comment
Share on other sites
Spunky Member

Spunky

Posted
  • Author
Posted (edited)

Sorry nevermind, I put the function back in and your code works fine..sorry forgot about that part.. When I implement it into my own code however...same story as before. Nothing happens until I click on one of the radio buttons or checkboxes from your form that is in there before any dynamically changing occurs. My boxes aren't in a form though, but I guess that shouldn't matter since they're still picked up...I tried using 'ul' instead of 'form' since they are in a list, but still nothing.

Edited by Spunky
Link to comment
Share on other sites
Spunky Member

Spunky

Posted
  • Author
Posted

I fixed it! I just did 'body' instead of 'form'. What a doozy...thank you thank you thank you dsonesuk for your help and patience!

Link to comment
Share on other sites
Spunky Member

Spunky

Posted
  • Author
Posted

Quick quick question: I have this code: 

$(function(){$('body').on('click', 'input[id="selectWoodElfHighborn"]', function() {	 if($(this).is(':checked'))   $('input.WEHoptions').attr('disabled',false);	 else   $('input.WEHoptions').attr('disabled',true);});});

Works beautifully by the way (and cut down how much regular JavaScript code I was using by a lot!). But howcome I cannot have multiple things in the if statement? As well as disabling the selected boxes I want to also uncheck them, but I cannot so much as put an alert in the if or else in addition to the single lines that are already there. Why is this?

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

You need to have curly brackets around the block of statements, like the brackets that enclose the code inside a function. Without the brackets it assumes that the body of the if statement is a single line.

Link to comment
Share on other sites
Spunky Member

Spunky

Posted
  • Author
Posted
You need to have curly brackets around the block of statements, like the brackets that enclose the code inside a function. Without the brackets it assumes that the body of the if statement is a single line.
Thank you very much. I'd gotten help elsewhere and I assumed since it is JQuery, that I am more unfamiliar with, it for some reason didn't need them brackets lol.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...