LWC - Radio Button behaving like checkboxes

Question

In my LWC component, I have an html table where I would display a collection of records. I cannot use a lightning data-table in this case, since what I want is a radio button selection, not a checkbox selection. Since lightning data-tables do not support radio buttons, I opted for an html table.

But, the following does not act as a radio button. I can select all the options in one go. It won't deselect the previous option when I check another option. I would also like to know if there is a way to uncheck the radio button that I have already checked.

<template for:each={allCourseOrders} for:item="courseOrder">
    <tr key={courseOrder.CourseOrderId}>
        <td>
            <div>
                <input                                                   
                    type="radio"                                                        
                    name={courseOrder.CourseOrderId} 
                    onclick={handleRadioChange}
                    style="margin-right: 5px;" >  
            </div>
        </td>
        .........
    </tr>
</template>

This courseOrder.CourseOrderId is unique. Any idea why it behaves like checkboxes ?

Answer 1

The name attribute must be the same for a group of radio buttons. The value differs. Try this.

<input                                                   
    type="radio"   
    name="myRadioButtonGroup"                                                     
    value={courseOrder.CourseOrderId} 
    onclick={handleRadioChange}
    style="margin-right: 5px;" >