Print Page - Customize Radio and Checkbox Controls

A function 'makeButtonGroup' can be used to build the linkbutton groups in more easier way. This function will build a hidden <input> element that will be post to the server.

Code:

function makeButtonGroup(c, options){
    var input = $('<input type="hidden">').attr('name', options.name).insertAfter(c.children('a:first'));
    $(c).addClass('m-buttongroup');
    $(c).children('a').linkbutton($.extend({}, options, {
        toggle: true,
        onClick: function(){
            if (options.group){
                input.val($(this).attr('value'));
            } else {
                var vv = [];
                $(c).children('a').each(function(){
                    if ($(this).linkbutton('options').selected){
                        vv.push($(this).attr('value'));
                    }
                });
                input.val(vv.join(','));
            }
        }
    }));
}

Before calling this function, prepare the group elements.

Code:

<span id="rr">
    <a href="#" value="m">Modem</a>
    <a href="#" value="s">Scanner</a>
    <a href="#" value="t">Tablet</a>
</span>
<span id="cc">
    <a href="#" value="m">Modem</a>
    <a href="#" value="s">Scanner</a>
    <a href="#" value="t">Tablet</a>
</span>

Calling 'makeButtonGroup' function with 'group' property will build the radio buttons, otherwise build the check buttons.

Code:

makeButtonGroup($('#rr'), {
    name: 'n1',
    group: 'g2'
})
makeButtonGroup($('#cc'), {
    name: 'n2'
})

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: bdearborn on December 14, 2015, 07:08:37 PM