I see the issues with your current code—let's get this working exactly how you want it: hiding the radio button list once an option is selected, and displaying the chosen course in the dedicated result div. Here's what was off in your original code, plus the fully corrected implementation:

What Was Wrong with the Original Code #

• Radio buttons weren't grouped: Each radio had a unique name attribute (co1, co2, etc.), so users could select multiple options instead of just one. They all need the same name to be a single group.
• Incorrect value retrieval: document.mainForm.rads.value doesn't target any valid element—there's no form with the name mainForm or a radio group named rads in your markup.
• No hiding logic: There was no code to hide the original radio button container after selection.
• Event binding was misdirected: The click event was attached to a non-existent form, so it never triggered properly.

Corrected Full Code #

<!-- Add a form wrapper and fix radio button names -->
<form id="courseForm">
  <p class="chat-message" id="radioContainer">
    Which course you want to choose?
    <label class="container">Course 1
      <input type="radio" name="course" value="course 1">
      <span class="checkmark"></span>
    </label>
    <label class="container">Course 2
      <input type="radio" name="course" value="course 2">
      <span class="checkmark"></span>
    </label>
    <label class="container">Course 3
      <input type="radio" name="course" value="course 3">
      <span class="checkmark"></span>
    </label>
    <label class="container">Course 4
      <input type="radio" name="course" value="course 4">
      <span class="checkmark"></span>
    </label>
  </p>
</form>

<div class="chat self">
  <p class="chat-message"><span id="result"></span></p>
</div>

<style>
/* Basic styling for custom radio buttons (matches your existing classes) */
.container {
  position: relative;
  padding-left: 25px;
  margin-right: 15px;
  cursor: pointer;
  display: inline-block;
}

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #eee;
  border-radius: 50%;
}

.container:hover input ~ .checkmark {
  background-color: #ccc;
}

.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked ~ .checkmark:after {
  display: block;
}

.container .checkmark:after {
  top: 6px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
}
</style>

<script>
// Get references to key elements
const radioContainer = document.getElementById('radioContainer');
const resultSpan = document.getElementById('result');
const courseForm = document.getElementById('courseForm');

// Add event listener to the form for radio button changes
courseForm.addEventListener('change', function(e) {
  // Check if the changed element is a radio button in our course group
  if (e.target.name === 'course' && e.target.checked) {
    // Hide the radio button container
    radioContainer.style.display = 'none';
    // Update the result with the selected course
    resultSpan.textContent = `The course I want is ${e.target.value}`;
  }
});
</script>

Key Fixes & Explanations #

1. Grouped Radio Buttons: All radio buttons now share the same name="course" attribute, so only one can be selected at a time.
2. Event Delegation: We attached a change event to the form (instead of individual radios) which is more efficient. It triggers whenever any radio in the group is selected.
3. Hide Logic: When a valid radio is checked, we set radioContainer.style.display = 'none' to hide the entire question and radio list.
4. Proper Value Retrieval: We use e.target.value to get the value of the selected radio directly from the event target, which is reliable.
5. Added Basic Styling: Included CSS for the custom checkmark class so your radio buttons look functional (you can adjust this to match your site's design).

内容的提问来源于stack exchange，提问作者Hasheem Ishaq