crea dos grupos de buttons radio separados en html in javascript

To create two groups of radio buttons and separate them in HTML using JavaScript, you can use the following code:

<div>
  <h3>Group 1:</h3>
  <label><input type="radio" name="group1" value="option1">Option 1</label>
  <label><input type="radio" name="group1" value="option2">Option 2</label>
  <label><input type="radio" name="group1" value="option3">Option 3</label>
</div>

<div>
  <h3>Group 2:</h3>
  <label><input type="radio" name="group2" value="option4">Option 4</label>
  <label><input type="radio" name="group2" value="option5">Option 5</label>
  <label><input type="radio" name="group2" value="option6">Option 6</label>
</div>
523 chars
14 lines

In this code, we have two groups of radio buttons, with the name attribute set to group1 and group2, respectively. This will ensure that the radio buttons within each group are mutually exclusive - only one can be selected at a time.

The labels are used to give the user a clickable area, so they can select an option easily. The value attribute is what gets submitted when the form is submitted.

Then, you can use CSS to style the radio buttons as you like.

To access the selected value in JavaScript, you can use the following code:

index.tsx
// get the selected value of group 1
const group1Value = document.querySelector('input[name="group1"]:checked').value;

// get the selected value of group 2
const group2Value = document.querySelector('input[name="group2"]:checked').value;
239 chars
6 lines

In this code, we use querySelector to find the selected radio button within the group, and get its value attribute. This will give us the value of the selected option.