jQuery Plugin For Deselectable Radio Buttons

For a long time, there's been an issue with the ability to clear selected radio buttons in HTML. This plugin gives you that functionality with a little bit of jQuery script.

deselectable-radioboxes.js is a super tiny jQuery plugin that allows you to select/deselect radio buttons by toggling the checked state using JavaScript. This can make any HTML radio button deselectable just like a checkbox.

See Also:

• 10 Best Custom Checkbox And Radio Input Replacements
• 10 Best Toggle Switches In JavaScript & Pure CSS

How to use it:

1. Download and insert the jquery-deselectable-radioboxes.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/src/jquery-deselectable-radioboxes.js"></script>

2. Call the function deSelectable on the radio buttons and the plugin will do the rest.

<div class="form-check">
  <input class="form-check-input" type="radio" id="flexRadioDefault1" name="select_type" value="espresso" />
  <label class="form-check-label" for="flexRadioDefault1">Espresso</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" id="flexRadioDefault2" name="select_type" value="double_espresso" checked />
  <label class="form-check-label" for="flexRadioDefault2">Double Espresso</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" id="flexRadioDefault3" name="select_type" value="americano" />
  <label class="form-check-label" for="flexRadioDefault3">Americano</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" id="flexRadioDefault4" name="select_type" value="cappuccino" />
  <label class="form-check-label" for="flexRadioDefault4">Cappuccino</label>
</div>

$(document).ready(function () {
  $("input[name='select_type']").deSelectable();
});

Changelog:

2022-11-07

• Update

---

This awesome jQuery plugin is developed by muratgorken. For more Advanced Usages, please check the demo page or visit the official website.