Accessing Radio Buttons using JQuery in SharePoint Online

I couldn't find anything obvious for accessing SharePoint Radio Buttons so chucked this together, hopefully useful for someone else :)

Note: The below code/solution is applicable to accessing radio button in a custom SharePoint List forms. To know how to create a custom form in SharePoint Online, read this article 
"Get Current Logged in User & Manager using REST API in SharePoint Online". 

Accessing Radio Button control in SharePoint is little tricky than accessing the radio buttons in HTML. The reason being, radio buttons are rendered as a table instead of a single control as shown below (radio button and it's preview in developer tools - Chrome):

So, each radio button is rendered inside SPAN tag in a table. To access the normal SharePoint controls, we will use either ID or title property but for Radio Buttons it is little complicated.
1. The actual radio button control is in "input" tag 
2. The values (Example here: Yes, No) are inside "label" tag 
3. But each control (Yes & No) are represented by ID which is generated by SharePoint 
4. If you keenly look at the ID, there is "ff41" which is the ID of the control generated randomly by SharePoint.

Now, open the designer, add an ID to the TD of the Radio button so that we can query it easily using JSOM as shown below:

1
2
3
4
//Radio button change event
$("td[id='tdApproved'] input:radio[name*='ff4']").change(function(){
     // do something
});

1
2
3
//Clear the values of radio button - reset the values of radio button
$("td[id='tdApproved'] input[name*='ff4']")[0].checked = false;
$("td[id='tdApproved'] input[name*='ff4']")[1].checked = false;

1
2
3
4
//Checking the value of radio button
if($("td[id='tdApproved'] input:radio[name*='ff4']:checked +  label").text() != 'Yes'){
    // do something
} 

1
2
//Focus Radio button 1st element in control
$("td[id='tdApproved'] input:radio[name*='ff4']:eq(0)").focus();

1
2
3
4
5
6
7
8
9
//Align all Radio Buttons in the page horizontally
function HorizontalAlignChoices() {
    var objSpans = $(".ms-RadioText");
    objSpans.each(function () {
        if ($(this).is("span")) {
            $(this).closest("tr").css({ "float": "left" });
        }
    });
}

*** "tdApproved" is the ID of the SharePoint Radio Button Control, "ff4" is the unique ID of the SharePoint Control in your List form. Change this ID according to your form to get the exact result.
Please share your valuable comments which will make me write more and also share this post using the below social buttons to others. 
Happy Share(ing)Point!    

Comments

  1. Very good article, just what i needed, many thanks.

    ReplyDelete
  2. Hi Marutha,

    Thanks for your interesting article. I have a requirement where clicking on a radio button should enable 2 date fields in the same line as the radio button. How would I achieve that?
    Thanks,
    Pradeep

    ReplyDelete
  3. Hi Marutha, great article! Thanks. I have a requirement to place 2 date fields side by for each choice in the radio button. How can i do this?
    Thanks,
    Pradeep

    ReplyDelete
    Replies
    1. Hi Pradeep,
      I will soon publish an article in a day or two for this requirements. Bit busy with the work. Thank you for your patience. Once published, I will share the link here. You can also subscribe so that you will get the articles in your mailbox :)

      Delete
    2. Thanks! Looking forward to seeing it.

      Delete

Post a Comment

Dear Readers, I LOVE to hear from you! Your feedback is always appreciated. I will try to reply to your query as soon as possible.

1. Make sure to click the "Notify me" check box at the right side to be notified of follow up comments and replies.
2. Please Do Not Spam - Spam comments will be deleted immediately upon review.