Radio button problem with ASP.NET MVC and Jquery

I have the following in my view:

<%=Html.RadioButton("optAll", "1", true)%> &nbsp Choose All
<br />
<%=Html.RadioButton("optAll", "2", false)%> &nbsp Choose Specific

Follows is the jquery:

$("#optAll").click(function () {
       alert ("Hitting the click function");
    });

Th开发者_Go百科e problem is that the alert only pops up when the "Choose All" radio button is clicked. It does not pop up when the "Choose Specific" radio button is clicked.

The following kind of works:

$(":input[@name='optAll']").change(function () {
       alert ("Hitting the click function");
    });

but this solution triggers the message when check boxes on the same page are clicked.

I've also tried the following with no luck:

$("#optAll").click(function () {
       alert ("Hitting the click function");
    });

Your problem is that you are using multiple ID's, you should use classes instead. HTML only supports ONE of each ID per page, so you cannot have #optAll more than once on one page, you should use a class instead for this. Use .optAll for the jQuery search and make the text areas have classes of optAll too.

If you have no more inputs with name optAll, the following should work:

$(":input[name='optAll']").change(function () {
   alert ("Hitting the click function");
});

if you have such inputs, you need to narrow your query. E.g:

$(":radio[name='optAll']").change(function () {
   alert ("Hitting the click function");
});

try this:

$("input[name='optAll']").click(function () {
                alert("Hitting the click function");
            });

Since you are selecting by ID to set the click function, jQuery selects only one element (the first one in document with that ID). If you want to change just these two, change their IDs to be different and write a $('#id').click() for both of them. If you have several sets of these, and it would be a huge pain to write individual lines for each button and you would prefer one for each set, then give them similar IDs (such as "optALL1" and "optALL2" in this case) and use the following:

$('input[id|="optALL"]').each($(this).click(function() { alert(""); }))

where the input[id|="optALL"] will select all input elements whose id begins with "optALL"

Your existing Markup looks like this:

<%=Html.RadioButton("optAll", "1", true)%> &nbsp Choose All
<br />
<%=Html.RadioButton("optAll", "2", false)%> &nbsp Choose Specific

You need to change it so each has it's own seperate class that jQuery can see, so I would reccomend using HTML itself rather than ASP to generate the radio buttons for you. Do this through the following:

<input class="radioButtons" type="radio" name="optAll" value="all" /> &nbsp Choose All <br />
<input class="radioButtons" type="radio" name="optAll" value="specific" /> &nbsp Choose Specific

Now change the jQuery so that it becomes this:

$(".radioButtons").click(function () {
   alert ("Hitting the click function");
});