“unknown pseudo-class or pseudo-element 'radio' ”

StackOverflow https://stackoverflow.com/questions/1788458

Question

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"></script>

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!

Was it helpful?

Solution

Maybe this?

$('input[type=radio]').click( ... );

OTHER TIPS

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

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"></script>
<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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top