开发者

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


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/


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;


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜