将/删除类添加到兄弟姐妹

Question

我有带无线电按钮的TR。我只能在线上选择一个按钮。我需要做到这一点，以便当选择按钮时，只保留在生产线上，其余的则是隐藏的。如果在所有按钮被隐藏时再次按下按钮 - 应该出现。

我写了一些代码

 $('#page tbody tr td:nth-child(2) div:nth-child(2)').click(function () {

        if ($('.checked-parent').siblings().hasClass("to-hide")) {
                $('.checked-parent').siblings().removeClass("to-hide");
        } 

    });
    $('.checked-parent').siblings().addClass("to-hide");

我有一组divs，其中包括班级。向他的所有亲戚中添加了一类。

如果我单击"与班级"的Diva。检查了父母的亲戚的隐藏类，将被删除，它们将再次可见。

我的问题：

1(如何制作它，以便在单击一类隐藏一类时，将所有元素添加到所有元素中，除了具有.checked-parent的元素

2(如何使该函数并不是在页面上的所有现有亲戚而是在每行内部单独工作？(现在我的所有按钮都是可见的，或者所有按钮都被隐藏了，而不管行如何(

Answer 1

我相信您可以使用适当的jQuery选择器简化问题。在下面，您将看到带有无线电按钮的<tr>行。当您选择一个按钮时，其标签将切换(隐藏和显示(。

从第1行开始，我们在所有广播按钮上添加了一个点击事件处理程序。

然后找到单击的单击单击按钮的最接近的<td>元素，并在该<td>中找到所有广播按钮，除非单击-.not(this)

然后，对于最接近的<td>中的每个广播按钮，我们将在其for属性中为其切换具有匹配ID的标签。

如果这只是带有无线电按钮的正常形式，我建议不要对用户隐藏选择，因为这不是预期的行为，您的用户可能会感到沮丧。

$("input:radio").on("click", function() {
  $(this).closest("td").find("input:radio").not(this).each(function() {
    var id = $(this).attr("id");
    $(this).toggle();
    $("label[for='" + id + "']").toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <div> Select something</div>
        <label for="test1"> Test 1</label>
        <input id="test1" type="radio" name="group1" value="test1">
        
        <label for="test2"> Test 2</label>
        <input id="test2" type="radio" name="group1" value="test2">
        
        <label for="test3"> Test 3</label>
        <input id="test3" type="radio" name="group1" value="test3">
      </td>
    </tr>
    <tr>
      <td>
        <div> Select something again</div>
        <label for="test4"> Test 4</label>
        <input id="test4" type="radio" name="group2" value="test4">
        
        <label for="test5"> Test 5</label>
        <input id="test5" type="radio" name="group2" value="test5">
        
        <label for="test6"> Test 6</label>
        <input id="test6" type="radio" name="group2" value="test6">
      </td>
    </tr>
  </tbody>
</table>

Answer 2

这隐藏了所有同胞与class隐藏的隐藏，除了检查父母＆amp;在下一步点击

上将所有同胞的类添加到所有同胞

 $('#page tbody tr td:nth-child(2) div:nth-child(2)').click(function () {
    if ($('.checked-parent').siblings().hasClass("to-hide")) {
            $('.checked-parent').siblings().not('.checked-parent').removeClass("to-hide");
    }
    else
       $('.checked-parent').siblings().not('.checked-parent').addClass("to-hide");
});