1

enter image description hereI need to display radio button horizontally and radio button selection should work for each row but in my case the selection works for one row only. Please help

<template for:each={listOfObjects} for:item='item'>
                                    <th key={item} class="" scope="col">
                                      <div class="slds-truncate" title="Name"> 
                                        <input type="radio" name="Radiobutton" value={item} style="margin-right: 5px;" >
                        
                                        <c-child-record-component objrec={item} fieldname={con}>
                                        </c-child-record-component>
                                      </div>
                                    </th>
                                  </template>

enter image description here

enter image description here

1
  • Are you trying to show the child record component as a table row? or inside a table cell? Please add that code as well. Where are you defining the table row? update that code as well please. Dec 4, 2020 at 7:01

1 Answer 1

2

You can use lightning-radio-group to create a group for each row. Aside from that, your main problem is that you did not give each "group" its own unique name. Notice how "name" is the same for every row:

<input type="radio" name="Radiobutton" value={item} style="margin-right: 5px;" >

The name should be unique for each row:

<input type="radio" name={item.Id} value={item} style="margin-right: 5px;" >

(Or some other unique value)

5
  • I have edited the question with another image and after using name={item.id} all radio button are getting selected. Do you have any solution for that? Please check the attachment of the latest screenshot! Dec 4, 2020 at 7:21
  • 1
    @IndreshBhargav Again, each group you intend to define needs to have its own unique name. You'll want to come up with a unique name for each group.
    – sfdcfox
    Dec 4, 2020 at 8:06
  • Thanks for your help it really worked!! Dec 4, 2020 at 9:34
  • Is there anyway to have one of the values checked by default?
    – Seyitbek
    Feb 16, 2023 at 14:48
  • @Seyitbek Whichever you provide the checked attribute for will be selected. For example, you could use checked={item.checked}, then specify checked for one of the values.
    – sfdcfox
    Feb 16, 2023 at 17:16

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .