views:

1301

answers:

3

There are many input radio elements on a web page and each radio element has several options. I want a function to be fired whenever one option of a radio element is checked. How to write the code using Jquery? One input element looks as follows:

<div class="below">
<input type="radio" value="information" name="option0"/>
information
<input type="radio" value="communication" name="option0"/>
communication
<input type="radio" value="goods" name="option0"/>
goods
<input type="radio" value="attention" name="option0"/>
attention
</div>

I wrote the code as follows:

$('input:radio').click(function () {
  if (this.checked) { // or $(this).attr('checked')
    alert(this.value); // or alert($(this).val());
  }
});

My Jquery version is

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;

I am using Firefox. On the error console it says "unknown pseudo-class or pseudo-element 'radio' ". Any idea? What's wrong?

My previous question is close to this question but I have not got a solution so far. So I have to ask around. Hope this question will not be closed as a duplicated question. Thank you!

+1  A: 

Maybe this?

$('input[type=radio]').click( ... );
pygorex1
No, it doesn't work neither.
Steven
Pygorex1 is correct. The selector is $('input[type=radio']). If you are still having trouble, I would suggest looking beyond the selector you are using.
Dustin Hansen
A: 

Input elements are usually contained inside a form element, is that your case? If so, maybe you need to include the form element in the selector. See an example here: http://docs.jquery.com/Selectors/radio

Konamiman
After reading your post, I added <form></form> so that all input elements are contained inside a form element. But again, it doesn't work.
Steven
But, is the code working, despite the error?
Konamiman
This part/snippet of code doesn't work. On error console it still says “unknown pseudo-class or pseudo-element ‘radio’ “ . Other part of Jquery code works fine.
Steven
A: 

I have setup a simple test page with your code, and altough I get the same error in the console, it works (the alert message is shown whenever I click on a radio button). I post the page code here in case it helps you to spot something you missed:

<html>
<header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script>
$(document).ready(function(){
$('input:radio').click(function () {
  if (this.checked) { // or $(this).attr('checked')
    alert(this.value); // or alert($(this).val());
  }
});
});
</script>
</header>
<body>
<div class="below">
<input type="radio" value="information" name="option0"/>
information
<input type="radio" value="communication" name="option0"/>
communication
<input type="radio" value="goods" name="option0"/>
goods
<input type="radio" value="attention" name="option0"/>
attention
</div>
</body>
</html>
Konamiman
The input radio code is dynamically created using Jquery.
Steven