Deselectable Radio Button

A group of radio buttons normally won't allow you to "deselect" so that none are selected. Simple javascript to allow for this.

HTML

<p>Select through the options as you normally would. Selecting one should deselect the previous as you would expect. Click on the selected option to deselect it.</p>

<div id="new">
    <label><input type="radio" name="options[]" value="1" /> Option 1</label>
    <label><input type="radio" name="options[]" value="2" /> Option 2</label>
    <label><input type="radio" name="options[]" value="3" /> Option 3</label>
</div>

<p>Here's a set of options the normal way. You cannot deselect the currently chosen option.</p>

<div id="old">
    <label><input type="radio" name="options[]" value="1" /> Option 1</label>
    <label><input type="radio" name="options[]" value="2" /> Option 2</label>
    <label><input type="radio" name="options[]" value="3" /> Option 3</label>
</div>

CSS

label {
    cursor: pointer;
    display: block;
    padding: 10px;
}

p {
    margin: 10px;
}

JavaScript

$(document).ready(function() {
    
    $("#new label").on("mouseup", function(e) {
        
        // cache the selected radio item
        var thisItem = $(this);
        // save the current state of the chosen item
        var previous = thisItem.children("input").prop("checked");
        // if item was previously selected then...
        if (previous) {
            // I introduce a slight delay
            // Without the delay the input stays checked
            setTimeout(function() {
                // after the delay uncheck the item
                // call blur() at end in case of focus indicator on input
                thisItem.children("input").prop("checked", false).blur();
            }, 10);
        }

    });       
    
});