Question 182625 in Html Question posted in
Some basic documentation can be found here.

Html – How to create two dimensional radio buttons?

in this image you can understand what exactly im trying to do

how to create two dimensional radio buttons choice should to unique vertically and horizontally.

checked  unchecked
unchecked  unchecked
unchecked  checked 

checked checked  wrong

how to create two dimensional radio button in html css js .

Tags:

2

Answers


  1. 0

    As a start – I would create a data structure with all your data (array? object with array?), nested data (arrays of options for the radio button?), and so on. Then I would build my html as a JavaScript string element, and finally I would use something like

    var myDiv = document.getElementById("mydiv");
myDiv.innerHtml = calculatedHtml;

    at least you would get systematic code reusability, and you would clarify your question.

    Login or Signup to reply.
  2. 0

    To create a two-dimensional radio button using HTML, CSS, and JavaScript, you can follow these steps:

    1. Add JavaScript to handle the selected radio button:
    // Get all the radio buttons
const radioButtons = document.querySelectorAll('input[type="radio"]');

// Add event listeners to each radio button
radioButtons.forEach(function(radio) {
  radio.addEventListener('change', function() {
    console.log('Selected option:', this.value);
    // Perform any desired actions based on the selected option
  });
});
     2. Add some CSS to style the radio buttons and the layout:

.row {
  display: flex;
}

label {
  margin-right: 10px;
}

input[type="radio"] {
  margin-right: 5px;
}

 3. Set up the HTML structure:
    <div id="radio-buttons">
  <div class="row">
    <label>
      <input type="radio" name="option" value="option1">
      Option 1
    </label>
    <label>
      <input type="radio" name="option" value="option2">
      Option 2
    </label>
  </div>
  <div class="row">
    <label>
      <input type="radio" name="option" value="option3">
      Option 3
    </label>
    <label>
      <input type="radio" name="option" value="option4">
      Option 4
    </label>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search