Question

我有单选按钮。我只能在线选择一个按钮。我需要这样做，以便当选择按钮时，只有它保持在线上，其余的都被隐藏。如果在隐藏所有按钮时再次按下按钮 - 它们应该出现。

我写了一些代码

 $('#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");

我有一组div，其中一个是类.checked-parent 他的所有亲戚都加入了一类隐藏的东西。

如果我点击带有.checked-parent类的diva，亲戚的隐藏类将被删除，它们将再次可见。

我的问题：

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

2）如何使功能功能不占用页面上的所有现有亲属，而是分别在每行内部工作？（现在要么我的所有按钮都可见，要么所有按钮都被隐藏，无论线条如何）

Answer 1

我相信你可以使用正确的jQuery选择器大大简化你的问题。您将在下面看到带有单选按钮的<tr>行。当您选择一个按钮时，其标签将切换（隐藏和显示）。

从第1行开始，我们在所有单选按钮上添加了一个click事件处理程序。

然后找到距离该点击的单选按钮最近的<td>元素，找到<td>中除所点击的单选按钮之外的所有单选按钮 - .not(this)

然后，对于距离最近<td>的每个单选按钮，我们将切换其可见性以及for属性中具有匹配ID的标签。

如果这只是一个带有单选按钮的普通表单，我建议不要隐藏用户的选择，因为这不是预期的行为，您的用户可能会感到沮丧。

＆＃13;

$("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();
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

这隐藏了所有兄弟姐妹的隐藏，除了check-parent＆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");

});

向兄弟姐妹添加/删除课程

2 个答案: