Homepage / Doc / Radio Button

Radio Button

Our radio button question type utilizes jQuery Uniform to unify the appearance of the item across different browsers and operating systems. This causes the complexity of the item’s HTML to be greater than that of a normal radio button group within a survey. Below is the HTML generated from a basic radio button item created with question text, subtext, and 3 options. The radio button has been assigned a custom class of radioButton on the behavior tab of the item editor.

itemstructures-radiobutton


You can customize the radio button item significantly by utilizing nothing but CSS and Javascript. Here is an example of a customized radio button item using the survey-wide CSS and survey-wide javascript features.

customized-radiobutton


Soure code of a unaltered radio button item.

<div id="_responseView__pageView_Layout___defaultZone_218654__containerPanel" class="itemContainer itemPositionLeft radioButton">
    <div id="_responseView__pageView_Layout___defaultZone_218654__contentPanel" class="itemContent" style="">
        <div id="_responseView__pageView_Layout___defaultZone_218654__topAndOrLeftPanel" class="topAndOrLeftContainer labelTop">
            <div id="_responseView__pageView_Layout___defaultZone_218654__textContainer" class="textContainer">
                <div id="_responseView__pageView_Layout___defaultZone_218654__questionText__questionPanel" class="questionTextContainer Question">
                    Radio Button Question Text
                </div>
                <div style="clear:both;"></div>
                <div id="_responseView__pageView_Layout___defaultZone_218654__questionText__descriptionPanel" class="descriptionTextContainer Description">
                    Radio Button Question Subtext
                </div>
                <div style="clear:both;"></div>
                <div style="clear:both;"></div>
            </div>
        </div>
        <div id="_responseView__pageView_Layout___defaultZone_218654__bottomAndOrRightPanel" class="bottomAndOrRightContainer inputForLabelTop">
            <div id="_responseView__pageView_Layout___defaultZone_218654__inputPanel" class="inputContainer radioButtonList">
                <table>
                    <tbody>
                        <tr>
                            <td>
                                <div class="radio-item">
                                    <div class="radio" id="uniform-192244"><span><input type="radio" name="_responseView$_pageView$Layout_$_defaultZone$218654_radio" value="192244" id="192244"></span></div>
                                </div>
                            </td>
                            <td>
                                <div class="radio-item">
                                    <label for="192244">                                       
                                    <div class="radioButtonLabel Answer">Choice 1</div></label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="radio-item">
                                    <div class="radio" id="uniform-192245"><span><input type="radio" name="_responseView$_pageView$Layout_$_defaultZone$218654_radio" value="192245" id="192245"></span></div>
                                </div>
                            </td>
                            <td>
                                <div class="radio-item">
                                    <label for="192245"> 
                                    <div class="radioButtonLabel Answer">Choice 2</div></label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="radio-item">
                                    <div class="radio" id="uniform-192246"><span><input type="radio" name="_responseView$_pageView$Layout_$_defaultZone$218654_radio" value="192246" id="192246"></span></div>
                                </div>
                            </td>
                            <td>
                                <div class="radio-item">
                                    <label for="192246"> 
                                    <div class="radioButtonLabel Answer">Choice 3</div></label>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
January 3, 2017