Hi
I am using labels with radio button. The label needs to be bold /highlight when the radio button is selected. But if other button is selected, that corresponding label should highlight and previous one should be un-highlighted.
That is not happening. Whichever radio button gets selected, the corresponding label gets highlighted but the does not remove highlight when other button is selected.
Here is JSP:
<!-- Insurance -->
<c:if test="${not empty plans}">
<div class="panel plansPanel"
style="<c:if test="${!PlanOnly}">display: none;</c:if>">
<div class="panel-body">
<h5>Insurance</h5>
</div>
<div class="panel-body insurance insurance-plan">
<c:forEach var="insurance" items="${plans}"
varStatus="loop">
<c:if test="${loop.index > 0}">
<hr>
</c:if>
<div
<%-- class="row row-parallel insurance-line <c:if test="${activeinsuranceCode eq insurance.code}">active</c:if>"> --%>
class="row row-parallel insurance-line">
<div class="col-xs-9">
<div class="radio">
<input type="radio" name="mbb" id="${insurance.code}"
class="planinsurance insuranceSelection"
value="${insurance.code}"
<c:if test="${activeinsuranceCode eq insurance.code}">checked="true"</c:if>>
<i></i>
</div>
<label for="${insurance.code}">${insurance.name}</label>
</div>
<div class="col-xs-3 text-right">${insurance.price.formattedValue}</div>
</div>
</c:forEach>
</div>
</div>
</c:if>
Here is JS code:
$(".insuranceSelection").on("click", function() {
$(this).closest(".insurance-line").addClass("active");
});
Please suggest to remove highlight on the previously selected radio button when a new button is selected.
remove the “active” class from every label before you add the class to the current label.
1 Like
e.g.
$(".insuranceSelection").on("click", function() {
$(".insurance-line").removeClass("active");
$(this).closest(".insurance-line").addClass("active");
});
1 Like
Thanks @Dormilich & @PaulOB .
It removes highlight. But I have another problem. I have two panels like below:
<!-- Insurance -->
<c:if test="${not empty plans}">
<div class="panel plansPanel"
style="<c:if test="${!PlanOnly}">display: none;</c:if>">
<div class="panel-body">
<h5>Insurance</h5>
</div>
<div class="panel-body insurance insurance-plan">
<c:forEach var="insurance" items="${plans}"
varStatus="loop">
<c:if test="${loop.index > 0}">
<hr>
</c:if>
<div
<%-- class="row row-parallel insurance-line <c:if test="${activeinsuranceCode eq insurance.code}">active</c:if>"> --%>
class="row row-parallel insurance-line">
<div class="col-xs-9">
<div class="radio">
<input type="radio" name="mbb" id="${insurance.code}"
class="planinsurance insuranceSelection"
value="${insurance.code}"
<c:if test="${activeinsuranceCode eq insurance.code}">checked="true"</c:if>>
<i></i>
</div>
<label for="${insurance.code}">${insurance.name}</label>
</div>
<div class="col-xs-3 text-right">${insurance.price.formattedValue}</div>
</div>
</c:forEach>
</div>
</div>
</c:if>
<c:if
test="${not empty addOnPlans}">
<div class="panel addonPanel">
<div class="panel-body">
<h5>Add-ons</h5>
</div>
<div class="panel-body insurance insurance-plan">
<c:forEach var="insurance" items="${dataAddOnProducts}"
varStatus="loop">
<c:if test="${loop.index > 0}">
<hr>
</c:if>
<div class="row row-parallel insurance-line">
<div class="col-xs-9">
<div class="radio">
<input type="radio" name="addon" id="${insurance.code}"
class="insuranceSelection dataAddOnProduct"
value="${insurance.code}"> <i></i>
</div>
<label for="${insurance.code}">${insurance.name}</label>
</div>
<div class="col-xs-3 text-right">${insurance.price.formattedValue}</div>
</div>
</c:forEach>
</div>
</div>
</c:if>`
So when I select a radio button on below panel it removes highlighting of the selected radio button on the other panel.
My requirement is that it should remove highlight of the other radio buttons of same panel. So there should be two highlighted and selected buttons, one on each panel.
JS:
$(".insuranceSelection").on("click", function() {
$(".insurance-line").removeClass("active");
$(this).closest(".insurance-line").addClass("active");
});
Please see the jsp here. Above formatting did not come good.
<!-- Insurance -->
<c:if test="${not empty plans}">
<div class="panel plansPanel"
style="<c:if test="${!PlanOnly}">display: none;</c:if>">
<div class="panel-body">
<h5>Insurance</h5>
</div>
<div class="panel-body insurance insurance-plan">
<c:forEach var="insurance" items="${plans}"
varStatus="loop">
<c:if test="${loop.index > 0}">
<hr>
</c:if>
<div
<%-- class="row row-parallel insurance-line <c:if test="${activeinsuranceCode eq insurance.code}">active</c:if>"> --%>
class="row row-parallel insurance-line">
<div class="col-xs-9">
<div class="radio">
<input type="radio" name="mbb" id="${insurance.code}"
class="planinsurance insuranceSelection"
value="${insurance.code}"
<c:if test="${activeinsuranceCode eq insurance.code}">checked="true"</c:if>>
<i></i>
</div>
<label for="${insurance.code}">${insurance.name}</label>
</div>
<div class="col-xs-3 text-right">${insurance.price.formattedValue}</div>
</div>
</c:forEach>
</div>
</div>
</c:if>
<c:if
test="${not empty addOnPlans}">
<div class="panel addonPanel">
<div class="panel-body">
<h5>Add-ons</h5>
</div>
<div class="panel-body insurance insurance-plan">
<c:forEach var="insurance" items="${dataAddOnProducts}"
varStatus="loop">
<c:if test="${loop.index > 0}">
<hr>
</c:if>
<div class="row row-parallel insurance-line">
<div class="col-xs-9">
<div class="radio">
<input type="radio" name="addon" id="${insurance.code}"
class="insuranceSelection dataAddOnProduct"
value="${insurance.code}"> <i></i>
</div>
<label for="${insurance.code}">${insurance.name}</label>
</div>
<div class="col-xs-3 text-right">${insurance.price.formattedValue}</div>
</div>
</c:forEach>
</div>
</div>
</c:if>
then you code it exactly like that:
$(this).closest(".panel").find(".insurance-line").removeClass("active");
1 Like
That’s the good thing about jQuery, you can write the code so it almost describes itself what it does.
1 Like
system
October 6, 2016, 8:06pm
9
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
