Visibility based on multiple radi controls RRS feed

  • Question

  • Hello All,

    May be this is a very simple solution, but I've been cracking my head over the past few hours.

    I have a situation where my radio control has almost like 20 options. If he user selects option-1 or option-2 or option-3, I have to show an element with ID, resultID. and if the user selects any other radio option then this resultID should be hidden. Can anyone suggest a workaround for this. I can only use SharePoint designer, OOB features.

    Thanks in advance!!


    Thursday, February 2, 2017 6:35 PM

All replies

  • Hi Praneeth

    There a few ways to do this - either way you will require to add JavaScript to the page.

    First of all, if you are struggling with the JavaScript side of things you can look here:


    It basically comes down to this with JavaScript:

    var btnradio = document.getElementsByName('category');
    var lbltxt = document.getElementById('label1');
    for (var i = 0, length = btnradio.length; i < length; i++) {
        if (btnradio[i].checked) {
                 var theval = btnradio[i].value;
                 var theid = btnradio[i].id;
                 lbltxt.innerHTML = "ID: " + theid + "</br>Value: " + theval;

    See a good JQuery example here:


    If you are just struggling with the SharePoint part you can do this by adding a content editor web part to your page and setting the content link of the web part to a JS file you have created in the site assets library.

    Check out this link:


     - Johan

    - Johan

    Thursday, February 2, 2017 7:34 PM
  • Thank you Johan,

    I think the script you have provided works fine when there is already a value selected (i.e dispform or Edit form). But how can this be achieved in Newform.aspx? I think we need an onchange or onclick events to check whenever any of the radio options are selected.

    Then use your script to check if it equals to our value and set visibility.

    So could you please give me some insight how this works in newform.aspx.



    Thursday, February 2, 2017 8:16 PM
  • Hi Praneeth,

    That's right, you can have the below JQuery in a content editor webpart.

    $(document).ready(function () {
    $("select[title='<<title of the radio button >>']").change(function() {
    //Do your stuff here you can use the code provided by Johan Myburgh

    Please remember to mark the replies as answers if they help.

    Thursday, February 2, 2017 8:25 PM
  • Hi Giridharan,

    Thanks for your reply, I really appreciate that!!

    Here EACH radio option is considered as a seperate field like - input tag wrapped inside span


    <span title="RADIO-OPTION-1" class="ms-RadioText"><input name="ctl00$ctl41$g_f6122fc1_1d8b_4cef_8f8a_ff8290a36cc6$ff841$ctl00$RadioButtons" id="ctl00_ctl41_g_f6122fc1_1d8b_4cef_8f8a_ff8290a36cc6_ff841_ctl00_ctl00" type="radio" value="ctl00"><label for="ctl00_ctl41_g_f6122fc1_1d8b_4cef_8f8a_ff8290a36cc6_ff841_ctl00_ctl00">RADIO-OPTION-1</label></span>

    so I am facing difficulty to provide an onchange event for whole of the radio control (with many radio options).

    Please advise.



    Thursday, February 2, 2017 9:51 PM
  • Hi Praneeth,

    In that case you may choose to select it by class ms-RadioText and bind the change events.

    Please remember to mark the replies as answers if they help.

    Thursday, March 2, 2017 2:47 PM