I had created one questionaire in which answer can be like Yes,No,etc. Yes/No, etc. are displayed in a Label but displayed as button by css. In a row when I click on say 'Yes' label, then it's background color changes and a smily is displayed. When No is
clicked, then, Yes, background color should be removed and background color should be displayed(in a row). Though Yes background is displayed but when 'No' is clicked, then, Yes's background is not removed. How can this be done in jquery?
<script type ="text/javascript">
$(function () {
//$('.btncolor').attr("title","Hide");
$('.btncolor').click(function () {
// alert($(this).attr("title"));
var row = $(this).closest('tr');
if ($(this).attr("title").trim() == 'Happy')
{
//Remove Button BackgroundColor for Happy,Sad,Indifferent
row.find(".btncolor").removeClass('bgClrHappy');
row.find(".btncolor").removeClass('bgClrSad');
row.find(".btncolor").removeClass('bgClrInd');
//Add Button BackgroundColor for Happy
$(this).addClass('bgClrHappy');
//Add class for Happy and Remove class for Sad,Indifferent
var prev = row.prev();
prev.find(".myimg").addClass('imgpichappy').removeClass('test').removeClass('imgpicsad').removeClass('imgpicind');
//$('.myimg').addClass('imgpichappy').removeClass('test');
}
else if ($(this).attr("title").trim() == 'Sad')
{
row.find(".btncolor").removeClass('bgClrHappy');
row.find(".btncolor").removeClass('bgClrSad');
row.find(".btncolor").removeClass('bgClrInd');
$(this).addClass('bgClrSad');
//Add class for Sad and Remove class for Happy,Indifferent
var prev = row.prev();
prev.find(".myimg").addClass('imgpicsad').removeClass('test').removeClass('imgpichappy').removeClass('imgpicind');
//$('.myimg').addClass('imgpicsad').removeClass('test');
}
else
{
row.find(".btncolor").removeClass('bgClrHappy');
row.find(".btncolor").removeClass('bgClrSad');
row.find(".btncolor").removeClass('bgClrInd');
$(this).addClass('bgClrInd');
//Add class for Indifferent and Remove class for Happy, Sad
var prev = row.prev();
prev.find(".myimg").addClass('imgpicind').removeClass('test').removeClass('imgpichappy').removeClass('imgpicsad');
// $('.myimg').addClass('imgpicsad').removeClass('test');
}
I'm really sorry for not being able to answer your question in time.
According to your description, I did a similar effect, When you click Yes, it's highlighted, When you click No, it also highlights, but the Yes highlighting disappears. The important thing is to find its parent and sibling elements through the $(this).parent().children()
method.
The code:
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
85 Points
380 Posts
Repeater Row remove class
Apr 09, 2019 01:00 PM|geetasks|LINK
I had created one questionaire in which answer can be like Yes,No,etc. Yes/No, etc. are displayed in a Label but displayed as button by css. In a row when I click on say 'Yes' label, then it's background color changes and a smily is displayed. When No is clicked, then, Yes, background color should be removed and background color should be displayed(in a row). Though Yes background is displayed but when 'No' is clicked, then, Yes's background is not removed. How can this be done in jquery?
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="QuesAns.aspx.cs" Inherits="TestPrj.QuesAns" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link type="text/css" href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery.min.js"></script>
<style type="text/css">
.btncolor {
background-color: #fff;
border: 1px solid #ccc;
padding: 3px 12px;
width: 100%;
}
.queans_hs {
overflow: auto;
width: auto;
height: 500px;
margin-top:20px;
}
.lblques_hs{
background-color:#ffffaa;
text-align:right;
}
.bgClrHappy{ /*Happy*/
background-color:#000930;
color:#fff;
}
.bgClrSad{ /*Sad*/
background-color:#D70000;
color:#fff;
}
.bgClrInd{ /*Indifferent*/
background-color:#003366;
color:#fff;
}
.test{visibility:hidden;}
.imgpichappy{
visibility:visible;
background-image: url(../Images/sn-happy.png);
width: 16px;
height: 16px;
background-size: 100% auto;
background-repeat: no-repeat;
}
.imgpicsad{
visibility:visible;
background-image: url(../Images/sn-sad.png);
width: 16px;
height: 16px;
background-size: 100% auto;
background-repeat: no-repeat;
}
.imgpicind{
visibility:visible;
background-image: url(../Images/sn-indif.png);
width: 16px;
height: 16px;
background-size: 100% auto;
background-repeat: no-repeat;
}
</style>
<script type ="text/javascript">
$(function () {
//$('.btncolor').attr("title","Hide");
$('.btncolor').click(function () {
// alert($(this).attr("title"));
if ($(this).attr("title").trim() == 'Happy')
{
// $(this).closest('tr').removeclass('bgClrHappy');
// $('tr').removeClass('bgClrHappy');
$(this).addClass('bgClrHappy');
$('.test').addClass('imgpichappy').removeClass('test');
}
else if ($(this).attr("title").trim() == 'Sad')
{
$(this).addClass('bgClrSad');
$('.test').addClass('imgpicsad').removeClass('test');
}
else {
$(this).addClass('bgClrInd');
$('.test').addClass('imgpicsad').removeClass('test');
}
// $(this).css("background-color", "yellow");
//alert('s');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="row">
<div class="col-sm-12 queans_hs">
<%-- <asp:Button ID="btnAns2" CssClass="btncolor" Text='<%# Eval("RESPONSE_B") %>' runat="server" />--%>
<asp:Repeater ID="repQues" runat="server">
<ItemTemplate>
<table>
<tr>
<td>
<%-- <div class="imgpichappy"></div>--%>
<asp:Image ID="imgRes" CssClass="test" runat="server" /></td>
<td colspan="4">
<asp:Label ID="lblQues" Text='<%# Eval("QUESTION_DESCP") %>' runat="server" CssClass="lblques_hs"></asp:Label>
</td>
</tr>
<tr>
<td> </td>
<td><asp:Label ID="btnAns1" CssClass="btncolor" ToolTip='<%#Eval("RESPONSE_A_SMILE") %>' Text='<%# Eval("RESPONSE_A") %>' runat="server" /></td>
<td><asp:Label ID="btnAns2" CssClass="btncolor" ToolTip='<%#Eval("RESPONSE_B_SMILE") %>' Text='<%# Eval("RESPONSE_B") %>' runat="server" /></td>
<td><asp:Label ID="btnAns3" CssClass="btncolor" ToolTip='<%#Eval("RESPONSE_C_SMILE") %>' Text='<%# Eval("RESPONSE_C") %>' runat="server" /></td>
<td><asp:Label ID="btnAns4" CssClass="btncolor" ToolTip='<%#Eval("RESPONSE_D_SMILE") %>' Text='<%# Eval("RESPONSE_D") %>' runat="server" /></td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</div>
</form>
</body>
</html>
Member
85 Points
380 Posts
Re: Repeater Row remove class
Apr 10, 2019 04:26 AM|geetasks|LINK
Any Suggestions. How to remove all class from a td and keeping only one, just like radio button, only one selection can be done?
Member
85 Points
380 Posts
Re: Repeater Row remove class
Apr 10, 2019 08:36 AM|geetasks|LINK
Done it like below:
<script type ="text/javascript">
$(function () {
//$('.btncolor').attr("title","Hide");
$('.btncolor').click(function () {
// alert($(this).attr("title"));
var row = $(this).closest('tr');
if ($(this).attr("title").trim() == 'Happy')
{
//Remove Button BackgroundColor for Happy,Sad,Indifferent
row.find(".btncolor").removeClass('bgClrHappy');
row.find(".btncolor").removeClass('bgClrSad');
row.find(".btncolor").removeClass('bgClrInd');
//Add Button BackgroundColor for Happy
$(this).addClass('bgClrHappy');
//Add class for Happy and Remove class for Sad,Indifferent
var prev = row.prev();
prev.find(".myimg").addClass('imgpichappy').removeClass('test').removeClass('imgpicsad').removeClass('imgpicind');
//$('.myimg').addClass('imgpichappy').removeClass('test');
}
else if ($(this).attr("title").trim() == 'Sad')
{
row.find(".btncolor").removeClass('bgClrHappy');
row.find(".btncolor").removeClass('bgClrSad');
row.find(".btncolor").removeClass('bgClrInd');
$(this).addClass('bgClrSad');
//Add class for Sad and Remove class for Happy,Indifferent
var prev = row.prev();
prev.find(".myimg").addClass('imgpicsad').removeClass('test').removeClass('imgpichappy').removeClass('imgpicind');
//$('.myimg').addClass('imgpicsad').removeClass('test');
}
else
{
row.find(".btncolor").removeClass('bgClrHappy');
row.find(".btncolor").removeClass('bgClrSad');
row.find(".btncolor").removeClass('bgClrInd');
$(this).addClass('bgClrInd');
//Add class for Indifferent and Remove class for Happy, Sad
var prev = row.prev();
prev.find(".myimg").addClass('imgpicind').removeClass('test').removeClass('imgpichappy').removeClass('imgpicsad');
// $('.myimg').addClass('imgpicsad').removeClass('test');
}
// $(this).css("background-color", "yellow");
});
});
</script>
Contributor
3370 Points
1409 Posts
Re: Repeater Row remove class
Apr 10, 2019 10:29 AM|samwu|LINK
Hi geetasks,
I'm really sorry for not being able to answer your question in time.
According to your description, I did a similar effect, When you click Yes, it's highlighted, When you click No, it also highlights, but the Yes highlighting disappears. The important thing is to find its parent and sibling elements through the $(this).parent().children() method.
The code:
The Result:
I hope it helps with your questions.
Best Regard,
Sam