Radio Buttons jQuery

I'm trying to show a div with input fields of a radio button choice, Yes or No.

HTML

<input id='companyreg' name='companyreg' class='radi开发者_StackOverflowo' type='radio' value='yes' /> Yes
<input id='companyreg' name='companyreg' class='radio' type='radio' value='no' /> No

The Jquery

var compfieldset = $("#companyfieldset");
//if javascript hide comp field
compfieldset.hide();
$("#companyreg").click(function(){
    var value = $("input[@name=companyreg]:checked").val();
    if (value === "yes") {
        compfieldset.slideDown();
    }
    if (value != "yes") {
        compfieldset.slideUp();
    }
});

Please can you help me out guys.

EDIT

Sorry.

When I click on No, nothing happens.

If I click on yes, the fieldset shows.

You cannot have two elements in the same document with the same ID. Your selector, #companyreg, is finding the first element and not the second. If you were to check the

$("#companyreg").length

you'd see 1.

You could probably get past this by using

$( '[id="companyreg"]' )

though it wouldn't fix your invalid document. The best way would be to remove the ID and add a class to those elements, then select via that class.

I have't checked the rest of your code to see if that's the only issue, but I suspect it's the biggest one.

IDs have to be unique. Use classes instead:

<input class='companyreg radio' name='companyreg' type='radio' value='yes' /> Yes
<input class='companyreg radio' name='companyreg' type='radio' value='no' /> No

and the event handler can be simplified to:

$(".companyreg").click(function(){
    if (this.value === "yes") {
        compfieldset.slideDown();
    }
    else {
        compfieldset.slideUp();
    }
});

There is not need for the :selected selector in your event handler. Unlike for checkboxes, the clicked radio button is the selected button.

Alternatively you can ditch class and id and use an attribute selector:

$('input[name=companyreg]')

You could also consider to use event delegation using .delegate(). There is no need to bind the same event handler to both of the elements.

Why does it not work with multiple IDs?

IDs have to be unique, the behaviour of retrieving elements by ID if they have the same ID is not specified. However, most browsers return the first element that appears at the DOM, that is why the event handler is only bound to the yes radio button.

Your question is not specific enough to know what the problem is, but I can point out some issues:

var compfieldset = $("#companyfieldset");
//if javascript hide comp field
compfieldset.hide();
$("#companyreg").click(function(){
    var value = $("input[@name=companyregyes]:checked").val();
    if (value == "yes") {
        compfieldset.slideDown();
    } else {
        compfieldset.slideUp();
    }
});

1. You don't need to check === on "yes" - it's always going to type check the yes as a string here
2. The second if you don't need if there are only two states, Yes and No.

Also, do you have something like...

<div id="companyfieldset">
 <input id='companyregyes' name='companyreg' class='radio' type='radio' value='yes' /> Yes
 <input id='companyregno' name='companyreg' class='radio' type='radio' value='no' /> No
</div>

As well as all ID attributes need to be unique, as in (see above id attribute).