• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 529
  • Last Modified:

How to use javascript to bold selected radio button text

Hi Guys

I have  a code which displays multiple radio buttons in <c:forEach>. Now what I need is to get the text of the selected radio button as bold. Would anyone please help me in how i can do this using javascript or anyother method

I would really appreciate any help regarding this

Here is the code which diaplys all the radio buttns inside the <c:forEach>
<td valign="top" id="WC_SingleShippingMethodDisplay_TableCell_22">

                              <input type="radio" name="shipModeId" id="WC_SingleShippingMethodDisplay_FormInput_shipModeId_In_ShipMethodPage_1" value="<c:out value="${shipModeId}"/>" <c:out value="${checked}"/>/>
                              <span class="logonheading t_td2"><c:out value="${shipMode.description.description}" escapeXml="false"/>&nbsp;
                              (<c:out value="${shipMode.description.field2}" escapeXml="false"/>)</span>
                        </td>

here is the netire <c:foreach>

-------------------------

<c:forEach var="shipModeId" items="${shippingDataBean.shipModeIds}">
                  <c:remove var="shipMode"/>
                  <wcbase:useBean id="shipMode" classname="com.ibm.commerce.fulfillment.beans.ShippingModeDataBean">
                        <c:set property="dataBeanKeyShippingModeId" value="${shipModeId}" target="${shipMode}"/>
                  </wcbase:useBean>

                  <c:choose>
                        <c:when test="${shipModeId eq orderBean.orderItemDataBeans[0].shippingModeId}">
                              <c:set var="checked" value="CHECKED" />
                        </c:when>
                        <c:otherwise>
                              <c:set var="checked" value="" />
                        </c:otherwise>
                  </c:choose>


             <tr>
                        <td valign="top" id="WC_SingleShippingMethodDisplay_TableCell_22">

                              <input type="radio" name="shipModeId" id="WC_SingleShippingMethodDisplay_FormInput_shipModeId_In_ShipMethodPage_1" value="<c:out value="${shipModeId}"/>" <c:out value="${checked}"/>/>
                              <span class="logonheading t_td2"><c:out value="${shipMode.description.description}" escapeXml="false"/>&nbsp;
                              (<c:out value="${shipMode.description.field2}" escapeXml="false"/>)</span>
                        </td>
                        <%--
                        <td valign="top" width="280" id="WC_SingleShippingMethodDisplay_TableCell_23">
                              <span class="strongtext"><b><label for="WC_SingleShippingMethodDisplay_FormInput_shipModeId_In_ShipMethodPage_1"><c:out value="${shipMode.description.description}" escapeXml="false"/></label></b></span>
                        </td>

                        <td valign="top" id="WC_SingleShippingMethodDisplay_TableCell_24">
                              <span class="text"><c:out value="${shipMode.description.field2}" escapeXml="false"/></span><br/>
                              <span class="text"><c:out value="${shipMode.description.field1}" escapeXml="false"/></span>
                        </td>
                        --%>
                        <td></td>
             </tr>
            </c:forEach>
0
huzefaq
Asked:
huzefaq
  • 2
2 Solutions
 
netsmithcentralCommented:
I would use a class switch to do this, embedding the buttons/text in a span.  Here's some sample code:

<html>
<head>
<style type="text/css">
.radioSelected {
    font-weight: bolder;
}

.radioRegular {
    font-weight: normal;
}
</style>
<script type="text/javascript">
function selectRadio(obj){
    var rads = document.getElementsByName(obj.name);
    for(i=0; i<rads.length; i++) rads[i].parentNode.className = 'radioRegular';

    obj.parentNode.className = 'radioSelected';
}

window.onload = function(){
    var rads=document.getElementsByTagName("INPUT");
    for(int i=0; i<rads.length; i++) if(rads[i].type=="radio") rads[i].onclick = function(){ selectRadio(this); };
}
</script>
</head>
<body>
<span class="radioRegular"><input type="radio" name="rad1">Text beside the radio button</span>
</body>
</html>
0
 
b0lsc0ttCommented:
The suggestion above should work.  If you don't want to use a class to do this then you can use ...

<input type="radio" onclick="this.style.fontWeight = 'bold';">

If you are concerned that the radio might be changed (so the bold would need to be changed back) then use ...

function makeBold(ele) {
    var radios = document.forms[0].radioName;
    for (var i=0; i < radios.length; i++) {
        radios[i].style.fontWeight = 'normal';
    }
    ele.style.fontWeight = 'bold';
}

That function would go up in the head section of your page inside script tags.  You would call it with ...

<input type="radio" name="radioName" value="yourValue" onclick="makeBold(this);">

Let me know if you have a question or need more info.

bol
0
 
b0lsc0ttCommented:
I'm glad I could help you.  Thanks for the grade, the points and the fun question.

bol
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now