Add/remove class to siblings

Question

I have got tr with radio buttons. I can choose only one button on line. I need to make it so that when the button is selected, only it remains on the line, and the rest are hidden. If you press the button again when all the buttons are hidden - they should appear.

I write some code

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

I have a set of divs, among them one with the class .checked-parent To all of his relatives a class of to-hide is added.

If I click on the diva with the class .checked-parent the to-hide class of the relatives will be deleted and they will be visible again.

My questions:

1) How to make it so that when you click add a class of to-hide to all elements except for the element with class .checked-parent

2) How can I make the function function take not all existing relatives on the page but work inside each line separately? (now either all of my buttons are visible or all are hidden, regardless of the line)

Answer 1

I believe you can simplify your problem a great deal using the proper jQuery selectors. Below you will see <tr> rows with radio buttons. When you select one the button and its label will toggle (hide and show).

Starting from line 1 we add a click event handler on all radio buttons.

Then find the closest <td> element to that clicked radio button and find all radio buttons in that <td> except for the one clicked - .not(this)

Then for each radio button in that closest <td> we will toggle the visibility for it and the label with the matching id in its for attribute.

If this is just a normal form with radio buttons I would suggest not hiding choices from the user as this is not something that is expected behavior and your users may get frustrated.

 $("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

this hides all sibling's with class to hide except checked-parent & add's class to all sibling's on next click

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

});