Radio

$radio Object

The $radio object is designed to simplify working with radio buttons in a document. It provides a change method to easily attach a change event listener to all radio buttons with a specified name.

Properties:

• $radio.names: An array containing all radio buttons with the specified name.

Methods:

$radio.change(callback)

• Parameters:

• callback: A function to be executed when any of the radio buttons with the specified name undergoes a change.

  • Parameters:
  • selectedRadio: The radio button that triggered the change.
  • allRadios: An array containing all radio buttons with the specified name.
  • event: The change event object.

• Returns:

• Returns the array of radio buttons with the specified name.

Example Usage:

<fieldset>
  <legend>Select color:</legend>

  <div>

    <input type="radio" name="colors" value="red" />
    <label for="huey">Red</label>
  </div>

  <div>
    <input type="radio" name="colors" value="green" checked />
    <label for="dewey">Green</label>
  </div>
  <div>
    <input type="radio" name="colors" value="blue" checked />
    <label for="dewey">Blue</label>
  </div>

</fieldset>

// Create a $radio object for radio buttons with the name 'color'
var radioGroup = $radio('colors');

// Attach a change event listener
radioGroup.change(function (selectedRadio, allRadios, event) {
    console.log('Selected radio:', selectedRadio.value);
    console.log('All radios:', allRadios);
    console.log('Event:', event);
});

// Another example: Change the background color based on the selected radio
this.$radio('colors').change(function (selectedRadio) {
    document.body.style.backgroundColor = selectedRadio.value;
});


// all colores nodeList 
  console.log('All drones:', radioGroup.names);

Customizing Radio Buttons

Radio buttons allow users to select one option from a list. Below are the variables you can customize to style your radio buttons:

General Styling

Variable	Description
--font-size	Size of the radio button.
--border-color	Color of the radio button border.
--border-width	Width of the radio button border.
--background-color	Background color of the radio button.
--disabled-background	Background color of the disabled radio button.
--disabled-opacity	Opacity of the disabled radio button.
--color-primary	Color of the radio button when checked.

Example CSS Customization

/* General Styling */
input[type="radio"] {
    /* Add your customizations here */
}

input[type="radio"]:disabled {
    /* Add your customizations here */
}

input[type="radio"]:checked {
    /* Add your customizations here */
}

In this example documentation, I've added more details about the $radio object, including its properties and the change method. The example usage demonstrates attaching a general event listener and another example that changes the background color based on the selected radio button. Feel free to modify the documentation and examples based on your specific use case.