取消选择未知可选答案

【问题标题】：Unselect unknown selectable取消选择未知可选
【发布时间】：2023-03-29 22:01:01
【问题描述】：

我有一张在逻辑上分成两半的表。如图所示，我将不得不选择一行的一半。

现在如果我选择不同的“半”行，我需要取消选择前一个。我该怎么做？我的代码在这里：

<tr class="line1">
    <td width="10" class="td3523" onclick="selectme('3523');">
        <input type="radio" name="selattendance" id="tr3523" onClick="setEditDelete(3523)"/>
    </td>
    <td width="100" class="td3523" onclick="selectme('3523');">2012-11-19</td>
    <td width="125" class="td3523" onclick="selectme('3523');">
        <table width="100%" cellpadding="0" cellspacing="0" style="border: 0;padding: 0;border-collapse: collapse">
            <tr> 
                <td style="width: 50%;padding-right: 10px;border: 0" align="right" valign="middle">22:54</td>
                <td style="width: 20%;border: 0">     <a href="#" onclick="loadPic('attendanceimages/39286a0a6b45cae9f116b11882f36046.jpg','2012-11-19','2012-11-19','add','','In','22:54:04','22:54:04');"><img src="images/punchimg.png"></a>
                </td>
                <td style="width: 20%;border: 0">&nbsp;</td>
            </tr>
        </table>
    </td>
</tr>

当我点击任何 td 时，所有具有相同 ID 的 tds 都会使用此代码被选中：

function selectme(id) {
    $('.td' + id).toggleClass("ui-selected");
}

我想我需要从之前选择的tds 中删除这个类。我该怎么做？谢谢。

【问题讨论】：

你能为它创建一个jsfiddle.net吗？

标签： jquery css jquery-ui selectable

【解决方案1】：

给你的 <td>-s 另一个类说 tdclss 然后在你的函数中使用它来删除 ui-selected 类。

function selectme(id) {
  $('.tdclss').removeClass("ui-selected");
  $('.td' + id).toggleClass("ui-selected");
}

【讨论】：

【解决方案2】：

一种方法：

$('input:radio').change(
    function(){
        // caching the jQuery $(this) object
        var that = $(this);
            that
                // moves up to the closest ancestor table element
                .closest('table')
                // finds the '.selected' elements within that table
                .find('.selected')
                // removes the 'selected' class from those elements.
                .removeClass('selected');
            that
                // moves to the parent td element
                .parent()
                // selects subsequent siblings *until* it finds
                // an element that matches the selector
                .nextUntil($('td:has("input:radio")'))
                // adds back the current td element to the collection
                .andSelf()
                // adds the 'selected' class
                .addClass('selected');
    });

JS Fiddle demo.

参考资料：

【讨论】：

这将是一个很好的答案，除了我需要单击行上的任何位置，而不仅仅是复选框。谢谢你的回答

【解决方案3】：

使用具有相同 ID 的多个字段迟早会自找麻烦。您可以使用类属性对单元格进行分组，或者您可以（可能）使用<span> 对它们进行分组（尽管我必须承认，我从未在<tr> 中尝试过<span>）。

【讨论】：