CODEWITHSUNDEEP
javascriptjquery
terrid25
terrid25

Reputation: 1946

clearing radio input using jQuery

I have a bunch of radio buttons that are below. These radio buttons are part of a larger form and are optional, so If a user clicks on one, then decides he/she doesn't want the option selected, there is no way to undo this.

I was wondering if there was any jQuery etc, that, when clicking a link for example, clear any radio selection, based on the group name in the HTML?

Thanks

Upvotes: 1

Views: 722

Answers (3)

Brendan Kidwell
Brendan Kidwell

Reputation: 866

I have created a solution like roberkules' solution, except mine clears the radiobutton if you click the radiobutton itself while it's checked. Use this if you don't want to add an extra "Clear" button to your layout.

http://jsfiddle.net/P9zZQ/6/

// Requires JQuery 1.4+ (possibly earlier)

$(function () {
    // Turn off a radiobutton if clicked again while on
    var checkOff = function (event) {
        var target = $(event.target);
        if (target.is('label')) {
            // deal with clicked label
            if (target.attr('for')) {
                // label has 'for' attribute
                target = $('#' + target.attr('for'));
            } else {
                // label contains a radiobutton as a child
                target = target.find('input[type=radio]');
            }
        }
        if (target.is('input:checked[type=radio]')) {
            event.preventDefault();
            window.setTimeout(function () {
                target.attr('checked', false);
            }, 200);
        }
    }

    // Find all radiobuttons and labels inside .radio-clearable containers
    $(
        '.radio-clearable input[type=radio], ' +
        '.radio-clearable label').mousedown(function (event) {
        // When clicked -- clear if it was checked
        checkOff(event);
    }).keydown(function (event) {
        // When receiving space, escape, enter, del, or bksp -- clear if it was checked
        if (event.which == 32 || event.which == 27 || event.which == 13 || which == 46 || which == 8) {
            checkOff(event);
        }
    });
});

Usage: For any radiobutton you want to be clearable in this manner, wrap it in a container with class "radio-clearable".

The code is triggered by clicking or sending a key (Space, Escape, Enter, Del, BkSp) to the radiobutton element or to its label.

Upvotes: 0

tildy
tildy

Reputation: 1009

var Custom = {
init: function() {
checkAllPrettyCheckboxes = function(caller, container){

        // Find the label corresponding to each checkbox and click it
        $(container).find('input[type=checkbox]:not(:checked)').each(function(){

            if($.browser.msie){
                $(this).attr('checked','checked');
            }else{
                $(this).trigger('click');
            };
        });
        };

        uncheckAllPrettyCheckboxes = function(caller, container){

            // Find the label corresponding to each checkbox and unselect them
            $(container).find('input[type=checkbox]:checked').each(function(){
                $('label[for="'+$(this).attr('id')+'"]').trigger('click');
                if($.browser.msie){
                    $(this).attr('checked','');
                }else{
                    $(this).trigger('click');
                };
            });
        };

I have created it in an init function, and adter then i called the init. } window.onload = Custom.init;

Upvotes: 0

roberkules
roberkules

Reputation: 6605

var group_name = "the_group_name";

// if jquery 1.6++
$(":radio[name='" + group_name + "']").prop('checked', false);

// prev than 1.6
// $(":radio[name='" + group_name + "']").attr('checked', false);

Working demo: http://jsfiddle.net/roberkules/66FYL/

Upvotes: 2

Related Questions