如何在UnChecked时触发单选按钮的OnChange事件

Posted 2021-04-14

我有一个包含行和列的html表。每行都有单选按钮，每行是一组单选按钮，意味着我只能在所有列的行中选择一个单选按钮。我试图在我的表格中选择一个单选按钮单元格设置一个CSS，这很好但是当我移动到同一行中的另一个单选按钮时，作为一个单选按钮组，前一个单选按钮被取消选择但是CSS仍然存在，因为在组中选择另一个无线电时不会触发自动取消选择的无线电的OnChange事件。

取消选择收音机有没有办法触发onChange事件？

答案

怎么样：http://jsfiddle.net/2Z8Nt/14/

JS

$(function () {
    // Create table and radios
    for (var tri = 0; tri < 3; tri++) {
        var $tr = $('<tr>').appendTo('table');
        var $td = $('<td>').appendTo($tr);
        for (var rai = 0; rai < 3; rai++) {
            var $sp = $('<span class="radio-holder">');
            var $rd = $('<input type="radio" name="rad-' + tri + '" class="rad" value="val-' + rai + '"/>').appendTo($sp);
            $sp.append('Radio ' + tri  + '' + rai);
            $td.append($sp);
            $tr.append($td);
        }
    }

    // Record to keep track of radio selection
    var selrad = {};

    // Handler
    $('input.rad').on('deselect', function () {
        $(this).parents('.radio-holder').addClass('just-deselected')
    }).each(function () {
        $(this).on('click', function () {
            var nm = $(this).attr('name');
            $('input[name="' + nm + '"').parents('.radio-holder').removeClass('just-deselected');

            if (selrad[nm]) {
                selrad[nm].trigger('deselect');
            }

            selrad[nm] = $(this);
        })
    });
})

CSS

.radio-holder {
    border: 1px solid silver; 
    margin: 3px;
    padding: 3px;
}
.radio-holder.just-deselected {
    border: 1px solid red; 
}