Allowing one radio button checked when radio inputs have different names - html

Question

I'm trying to figure out how to only allow one of two radio buttons to be checked in a form where the two radio buttons don't share the same name. I've been experimenting for hours now, but can't figure it out. Here is what I have currently:
$("#theForm").click(function(){
//alert('You clicked radio!');
if($('input:radio:checked')){
$('input:radio:checked').prop("checked", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="theForm">
<form class="type">
<input type="radio" id="topic" name="topic" value="on" checked>
<input type="radio" id="all" name="all" value="on">
</form>
</div>
Here's a Fiddle: https://jsfiddle.net/Codewalker/reh0mzs3/1/

Answer 1

the click function will give you an event. you can target the event.target.name to see which radio button was clicked on and then do a simple if statement to uncheck the other radio button
$("#theForm").click(function(){
if(event.target.name == 'topic'){
$('#all').prop("checked", false);
}else{
$('#topic').prop("checked", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="theForm">
<form class="type">
<input type="radio" id="topic" name="topic" value="on" checked>
<input type="radio" id="all" name="all" value="on">
</form>
</div>

Answer 2

This should work:
<div> <input type="radio" id="contactChoice1" name="contact" value="email">
<label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2" name="contact" value="phone">
<label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3" name="contact" value="message">
<label for="contactChoice3">Message</label> </div>