CODEWITHSUNDEEP
htmlradio-buttonchecked
demkovych
demkovych

Reputation: 8887

How do I check only one radio button without changing the input name?

I need only one radio button checked without changing the input name.

Here is my code:

<ul class="radiobox_item_type">
    <li>
        <input name="item_type" value="clear" type="radio" id="radiobox_my" /> 
        <label for="radiobox">Without</label>
    </li>
    <li>
        <input name="item_new" value="new" type="radio" id="radiobox_my"  /> 
        <label>News</label>
    </li>
    <li>
        <input name="item_action" value="action" type="radio" id="radiobox_my" /> 
        <label for="radiobox2">Action</label>
    </li>
</ul>

Upvotes: 0

Views: 2888

Answers (4)

Rio
Rio

Reputation: 15

I definitely agree with the other answers that the best practice would be to have all the radio buttons in a group have the same name. In answer to your specific question, however, here is a jQuery solution that ensures that only one radio is selected at a time, see fiddle:

var $container = $(".radiobox_item_type");
$container.on("click","input[type='radio']", function(){
    //uncheck other radio buttons
    $container.find('input[type="radio"]').each(function(){
        $(this).prop('checked',false);
    });
    //check this radio button
    $(this).prop('checked',true);        
});

Basically, a click listener is added to the parent that checks if the radio buttons inside are clicked. When clicked, it unchecks all other radio buttons in the container and then checks the one that was clicked.

Upvotes: 0

Paul Brindley
Paul Brindley

Reputation: 273

Try giving all of the radio buttons the same name.

Upvotes: 3

nFinIt_loop
nFinIt_loop

Reputation: 1451

You can't have the same id on all three radio buttons. If all three buttons are part of the same group then you have to give them all the same name.

Upvotes: 0

Muhammad Rashid
Muhammad Rashid

Reputation: 583

Try this,if you want to select only one radio button you should be same all radio button name

<ul class="radiobox_item_type">
            <li>
            <input name="item_type" value="clear" type="radio" id="radiobox_my" /> 
            <label for="radiobox">Without</label>
            </li>
            <li>
            <input name="item_type" value="new" type="radio" id="radiobox_my"  /> 
            <label>News</label>
            </li>
            <li>
            <input name="item_type" value="action" type="radio" id="radiobox_my" /> 
            <label for="radiobox2">Action</label>
            </li>
        </ul>

Upvotes: 1

Related Questions