Stack Overflow Asked by user3115252 on December 9, 2021
When I use radio button html without using repeater, there is no problem and it works properly, but when I use repeater, jQuery functions do not work.
Thank you for your help
Styles and JS Link
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #222;
}
.custom-radios div {
display: inline-block;
}
.custom-radios input[type="radio"] {
display: none;
}
.custom-radios input[type="radio"] + label {
color: #333;
font-family: Arial, sans-serif;
font-size: 14px;
}
.custom-radios input[type="radio"] + label span {
display: inline-block;
width: 40px;
height: 40px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
border: 2px solid #FFFFFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
background-repeat: no-repeat;
background-position: center;
text-align: center;
line-height: 44px;
}
.custom-radios input[type="radio"] + label{
display: flexbox;
color: #FFFFFF;
}
.custom-radios input[type="radio"] + label span img {
opacity: 0;
transition: all .3s ease;
}
.custom-radios input[type="radio"]#color-1 + label span {
background-color: #2ecc71;
}
.custom-radios input[type="radio"]#color-2 + label span {
background-color: #3498db;
}
.custom-radios input[type="radio"]#color-3 + label span {
background-color: #f1c40f;
}
.custom-radios input[type="radio"]#color-4 + label span {
background-color: #e74c3c;
}
.custom-radios input[type="radio"]:checked + label span img {
opacity: 1;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
Controls/Form
<form id="form1" runat="server">
<div>
<span id="submittername" style="color: #FFFFFF"></span>
<br />
<div class="custom-radios">
<asp:Repeater ID="rptChild" runat="server">
<ItemTemplate>
<div>
<span style="color: #ffffff;display:grid;position: relative;left:10px; bottom: 10px;"><%# Eval("ColorName") %></span>
<input type="radio" id="<%# Eval("ColorID") %>" name="color" value="<%# Eval("ColorName") %>">
<label for="color-1">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
</ItemTemplate>
</asp:Repeater>
<div>
<span style="color: #ffffff;display:grid;position: relative;left:10px; bottom: 10px;">blue</span>
<input type="radio" id="color-2" name="color" value="blue">
<label for="color-2">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div>
<span style="color: #ffffff;display:grid;position: relative;left:10px; bottom: 10px;">yellow</span>
<input type="radio" id="color-3" name="color" value="yellow">
<label for="color-3">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div>
<span style="color: #ffffff;display:grid;position: relative;left:10px; bottom: 10px;">red</span>
<input type="radio" id="color-4" name="color" value="red">
<label for="color-4">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
</div>
</div>
</form>
Javascript
<script>
$(document).ready(function () {
$("input:radio[name=color]:first").attr('checked', true);
var selValue = $("input[type='radio']:checked").val();
$("#submittername").text(selValue);
//console.log(selValue);
});
$(".custom-radios").click(function () {
var selValue = $("input[type='radio']:checked").val();
$("#submittername").text(selValue);
//console.log(selValue);
});
</script>
Simple code works without repeater.
In repeater there are 3 colors that document.ready correctly, but when click does not work.
Below that are simple codes that work properly without repeater.
The problem is using the repeater with jQuery.
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP