Question

What I am trying to do with jQuery is make it so that I can use three radio buttons in the same group with each other. When one is selected the other two shouldn’t be active. I want to be able to display separate blocks of HTML in the end result with the jQuery, but I can’t get something simple to run right with what I am working with.

Here is the code that I have to work with at the moment:

    $(document.ready(function()
{
    $("input[name='rdiobut']").change(function(){
        if ($("input['rdiobut']:checked".val() == 'a'))
        $("#rdiocont").text("There is no expiration date.");
        else if ($("input[name='rdiobut']:checked".val() == 'b'))
        $("#rdiocont").text("Tell me how many days until expire");
        else ($("input[name='rdiobut']:checked".val() == 'c'))
        $("#rdiocont").text("Pick the date to expire from a calendar");
    });
});

Here is the table that the jQuery goes to:

<tr><td>Expire Settings:</td><td>Does Not Expire: <input type="radio" name="rdiobut" value="a" checked="check" /> &nbsp;&nbsp;&nbsp;<strong>OR</strong> Expires By Days <input type="radio" name="rdiobut" value="b" /> &nbsp;&nbsp;&nbsp;<strong>OR</strong> Select a Date to Expire On <input type="radio" name="rdiobut" value="c" /></td></tr><tr id="rdiocont"><td>No Expiration Date</td></tr><tr id="rdiocont"><td>Expires by Days</td></tr><tr id="rdiocont"><td>Choose Expiration by Calendar</td></tr>

Does anyone have any advice or thoughts on what I may be doing wrong?

Answer 1

Ok, you had some errors in your code. Here you have it, all cleaned up and working like I think you want it (working example):

jQuery

$(document).ready(function()
{
    $("input[name='rdiobut']").change(function(){
        if ($("input[name='rdiobut']:checked").val() == 'a')
            $("#rdiocont").text("There is no expiration date.");
        else if ($("input[name='rdiobut']:checked").val() == 'b')
            $("#rdiocont").text("Tell me how many days until expire");
        else if ($("input[name='rdiobut']:checked").val() == 'c')
            $("#rdiocont").text("Pick the date to expire from a calendar");
    });
});

HTML

<table>
    <tr>
        <td>Expire Settings:</td>

        <td>
            Does Not Expire: 
            <input type="radio" name="rdiobut" value="a" checked="checked" /> &nbsp;&nbsp;&nbsp;
            <strong>OR</strong> 
            Expires By Days 
            <input type="radio" name="rdiobut" value="b" /> &nbsp;&nbsp;&nbsp;
            <strong>OR</strong> 
            Select a Date to Expire On 
            <input type="radio" name="rdiobut" value="c" />
        </td>
    </tr>

    <tr id="rdiocont">
        <td>(Select an option)</td>
    </tr>

</table>

Some notes:

• Don’t use the same id for various elements (like you used in <tr id="rdiocont">);
• It is $(document).ready, not $(document.ready – watch for the closing )
• Like @Ryan said, don’t evaluate an expression in the else statement. If you really want to evaluate the expression, continue to use else if (it’s not mandatory to have an else statement).
• On your first evaluation, it’s input[name='rdiobut'] and not input['rdiobut']. You also didn’t close the ) after :checked"