0

We have multiple checkbox & radio buttons columns on our SharePoint online list form. We want to change the display of all checkbox & radio button horizontally.

We tried below script, but all checkbox & radio buttons are showing in one line (please refer screenshot below). We want horizontal alignments based columns.

Any suggestions on how to do it?

Thanks

enter image description here

Script tried:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript">
var $j = jQuery.noConflict();
$j(document).ready(function()
{
  var firstRadio = $j(".ms-RadioText:eq(0)");
  $j(".ms-RadioText:gt(0)").appendTo($j(firstRadio));
});
</script>

enter image description here

  • Are there 3 choice columns? Radio, Test1 and test2?? – Ganesh Sanap Feb 14 at 4:53
  • Yes, Three are Choice columns only. We tried above script and buttons are displaying as per screenshots. – murali kuruva Feb 14 at 5:01
  • Try below code and let me know if this works...replace the field name as per the display name of your radio choice field. – Ganesh Sanap Feb 14 at 5:03
0

For Radio buttons:

Try below code:

<script type="text/javascript">
    $(function () {
        var reBuildTR = $('<tr></tr>').append("<th></th>");

        //update Test1 as your field name
        $('table[id^="Test1"]').find('td').each(function () {
            $(reBuildTR).append($(this));
        })
        $('table[id^="Test1"]').html("").append(reBuildTR);
    })
</script>

For Checkboxes:

<script type="text/javascript">
    $(function () {
        ArrangeCheckBoxes("Test1");
        ArrangeCheckBoxes("test 2");
    });
    function ArrangeCheckBoxes(checkboxFieldName) {  
        var len = $("table[id^='" + checkboxFieldName + "'] tbody tr td .ms-RadioText").length;  
        temp = len - 1;  
        count = 0;  
        var startingElement;  
        for (i = 0; i < len; i = i + 4) {  
            if (count == temp) break;  
            startingElement = $("table[id^='" + checkboxFieldName + "'] tbody tr td .ms-RadioText:eq(" + i + ")").closest('tr');
            count++;  
            for (j = i + 1; j <= i + 3; j++) {  
                if (count == temp) break;  
                $("table[id^='" + checkboxFieldName + "'] tbody tr td .ms-RadioText:eq(" + (j) + ")").closest('td').appendTo(startingElement);  
                count++;  
            }  
        }  
    } 
</script>
  • Hi Ganesh, We tied your script. Alignments changed vertical. But we want change all checkbox & radio button (three columns(Radio, Test1 & Test 2) ) from vertical to horizontally alignments. Kindly suggest. – murali kuruva Feb 14 at 5:16
  • I have updated my answer. try it for multi-select choice (checkboxes) field. Pass display name of your fields to the ArrangeCheckBoxes() function. – Ganesh Sanap Feb 14 at 5:41
  • I tried your update script with by adding script editor web part on new form page. But its not working Ganesh. Where i need to give columns (or) ID names? where i need to Usage columns. Sorry i am new to coding part. Kindly suggest more please. – murali kuruva Feb 14 at 6:05
  • Try updated code. you need to pass the display name (name on the form) of your field at $(function () { ArrangeCheckBoxes("Test1"); ArrangeCheckBoxes("test 2"); }); – Ganesh Sanap Feb 14 at 6:17
  • Ganesh, i had given my display column name on your code, but still no change. is anything i am doing wrong? I just copy your script and placed on my new list form. – murali kuruva Feb 14 at 6:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.