The first set of buttons toggle the second set.
However if someone checks rbtn1 and then checks rbtn3 but then changes their mind clicks rbtn2 but leaves rbtn4 blank, rbtn3 is still clicked even though it isn't visible. I'm trying to uncheck the second set of ratio buttons if there is a change in the first set but the code I have in the onclick has no effect. Can code like that be in the onclick?
<asp:RadioButton ID="rbtn1" onclick="$('#spanOne').show(); onclick="$('#spanTwo').hide();
$('rbtn3').checked = false; "/>
<asp:RadioButton ID="rbtn2" onclick="$('#spanOne').hide(); onclick="$('#spanTwo').show();
$('rbtn4').checked = false;"/>
<span id = "spanOne">
<asp:RadioButton ID="rbtn3" />
</span>
<span id = "spanTwo">
<asp:RadioButton ID="rbtn4" />
</span>
Please delegate - wrap the radios in a static container.
Also give all the radios the same name or they won't be radios.
const rads = $("#staticContainer input[type=radio]"); // or [name=rbtn] if you give them that name
$("#staticContainer").on("click","input[type=radio]",function() {
$(rads).each(function() {
if (!$(this).is("visible")) $(this).val("")
})
})
If you define asp controls it requires runat attribute for that control. If control have runat the id will be generated dynamically . To access that dynamic id you can write "[id$={your acual control name}]" . If you treat the rbtn1,rbtn2 as group its better to add GroupName to select only one out of these two. Finally use the below code as a solution.
<asp:RadioButton ID="rbtn1" GroupName="firstset" Text="rbtn1" onclick="$('#spanOne').show();$('#spanTwo').hide(); $('[id$=rbtn3]').prop( 'checked', false);" runat="server" />
<asp:RadioButton ID="rbtn2" GroupName="firstset" Text="rbtn2" onclick="$('#spanOne').hide(); $('#spanTwo').show(); $('[id$=rbtn4]').prop( 'checked', false);" runat="server" />
<span id="spanOne">
<asp:RadioButton ID="rbtn3" runat="server" Text="rbtn3" />
</span>
<span id="spanTwo">
<asp:RadioButton ID="rbtn4" Text="rbtn4" runat="server" />
</span>