jQuery, hiding items on click

[katakx]

Hi.
So I have a problem:
I have a table with products, let’s say 40 products.
the first 20 products are a certain type, and they have a class of “item1”.
the next 20 products are a different type from the first 20 and they have class of “item2”.

The goal I want to achieve is this:
The user is allowed to pick only 1 product from the first 20 products. When he clicks on an item from the first 20 products, only the one product that he selected will stay, all other products with that class “item1” will be removed.
When the user unchecks the item, products will appear again.

Same goes for the next 20 items. When user clicks an item with class “item2”, all the products will be removed that have class “item2” only the one he clicked remains.

I tryed toggle, and show/hide, but without success.

  <td id="a2" class="p"><!-- item 2 -->
            <label class="chek">$                                                
      <input id="textBoxExtras" class="textBoxExtras textBoxExtras21" cijenaextra="0.00" name="extra_id[21]" value="0" type="checkbox">
                </label>
        </td>
                <td id="a2" class="n"><span class="item1">
      Item Name 2
      </span>
      </td>
      </tr>
      <tr>    
      <td id="a3" class="p"><!-- item 3 -->
                <label class="chek">$    
      <input id="textBoxExtras" class="textBoxExtras textBoxExtras185" cijenaextra="0.00" name="extra_id[185]" value="0" type="checkbox">
                </label>
        </td>
        <td id="a3" class="n"><span class="item1">
          Item Name 3
        </span>
  </td>
                                        
  <td id="a4" class="p1"><!-- item 4 -->
            <label class="chek">$                                                
      <input id="textBoxExtras" class="textBoxExtras textBoxExtras21" cijenaextra="0.00" name="extra_id[21]" value="0" type="checkbox">
                </label>
        </td>
                <td id="a4" class="n"><span class="item2">
      Item Name 4
      </span>
      </td>
      
      </tr>
      <tr>    
      <td id="a5" class="p1"><!-- item 5 -->
                <label class="chek">$    
      <input id="textBoxExtras" class="textBoxExtras textBoxExtras185" cijenaextra="0.00" name="extra_id[185]" value="0" type="checkbox">
                </label>
        </td>
        <td id="a5" class="n"><span class="item2">
          Item Name 5
        </span>
  </td>
                                        
  <td id="a6" class="p1"><!-- item 6 -->
            <label class="chek">$                                                
      <input id="textBoxExtras" class="textBoxExtras textBoxExtras21" cijenaextra="0.00" name="extra_id[21]" value="0" type="checkbox">
                </label>
        </td>
                <td id="a6" class="n"><span class="item2">
      Item Name 4
      </span>
      </td>
      
      </tr>
      </tbody>
      </table>

$	Item Name 1

[markbrown4]

Hi, I think something like this is what you’re after.

$('table').on('change', '.item1 input', function(event) {
  var tr = $(event.target).closest('tr')[0];
  $('.item1').not(tr).toggle();
})
$('table').on('change', '.item2 input', function(event) {
  var tr = $(event.target).closest('tr')[0];
  $('.item2').not(tr).toggle();
})