Question

我在表格中有单选按钮。点击后，我希望相邻的单元格变为绿色。
我能够使用JQuery添加一个＆＃34;突出显示＆＃34; $ .change事件上的课程。

我的问题是，有时页面加载＆＃34;已检查＆＃34;属性已设置。如何使用JQuery查找已经检查过的所有单选按钮元素＆＃34;页面加载时的属性？这是我尝试过的，但似乎无法正常工作。

JQUERY

$('input:radio').ready(function() {
    if($(this).is(':checked')){
        $(this).parent().addClass('highlight');
        var $td = $(this).parent();
        $td.siblings().removeClass('highlight');
        $td.next().addClass('highlight');
    }   
});

CSS

#sort td.highlight {background: #33FF99;}

Answer 1

要遍历所有单选按钮，请使用each功能：

$(document).ready(function(){ $('input:radio').each(function(i,e) { if($(e).is(':checked')){ $(e).parent().addClass('highlight'); var $td = $(e).parent(); $td.siblings().removeClass('highlight'); $td.next().addClass('highlight'); } }); });

Answer 2

$(document).ready(function () {
    var check = $('input:radio:checked');

    if (check.is(':checked')) {
        $(check).parent('td').addClass('highlight');
    }

    $('input:radio').on('change', function () {
        $('#sort td').removeClass('highlight');
        $(this).parent('td').addClass('highlight');
    });
});

演示 - http://jsfiddle.net/cn073npq/2/

Answer 3

您可以创建一个实用程序功能来突出显示下一个单元格。对于表中的每个无线电，在document.ready上调用此函数。在每个无线电的change事件上调用相同的功能。

有些事情是这样的：

演示小提琴：http://jsfiddle.net/abhitalks/tee56wz0/

演示代码段 ：

＆＃13;

$("input[type=radio]").each(function() {
    setHighlight(this);  // call the utility function for each radio on document.ready
});

$("input[type=radio]").on("change", function() {
    setHighlight(this);  // call the utility function for each radio on change
});

function setHighlight(elem) {
    if (elem.checked) {  // if the radio is checked, 
        $("table td").removeClass('highlight');        // remove highlight from all cells
        $(elem).parent().next().addClass("highlight"); // add highlight to next cell
    }
}

＆＃13;

td.highlight {background: #33FF99;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" checked /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
</table>

＆＃13;

Answer 4

需要为单选按钮编写常用点击事件它会检查下一个td / div并将类添加到它

$("input[type=radio]").on("click", function() {
    $("td").removeClass("active");
    $(this).parent().next().addClass("active");
});

如果HTML代码看起来像这样

<table>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" checked /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="radio" name="common" /></td><td>Cell 2</td><td>Cell 3</td></tr>
</table>

CSS类，用于添加颜色作为背景到td

.active {background: #00FF00;}

突出显示复选框

4 个答案: