CODEWITHSUNDEEP
jquery
user1822824
user1822824

Reputation: 2488

Toggle select table columns on/off by using radio buttons (off by default)

I have a basic table that should show first name and last name columns only when loaded. The user can toggle the radio buttons to show one extra column at a time. The issue is that the toggling is not working correctly and the user can see multiple extra columns at once. Also, when the table loads, the extra columns aren't hidden. I have this working for checkboxes but when I adjusted for radio buttons it caused these issues.

$('input[type="radio"]').each(function() {
    var inputValue = "table ." + $(this).attr("name");
    $(inputValue).hide();
});
    
    
$('input[type="radio"]').click(function(){
    var inputValue = "table ." + $(this).attr("value");
    $(inputValue).toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Select a column to show. You can only show one extra column from the options below at a time.</p>
<input type="radio" name="extraCol" id="age" value="age">
<label for="age">Age</label>
<input type="radio" name="extraCol" id="gender" value="gender">
<label for="gender">Gender</label>
<input type="radio" name="extraCol" id="hometown" value="hometown">
<label for="hometown">Hometown</label>
<input type="radio" name="extraCol" id="off" value="off" checked>
<label for="off">Don't show</label>;
      
 <table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
    <th class="age">Age</th>
    <th class="gender">Gender</th>
    <th class="hometown">Hometown</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td class="age">50</td>
    <td class="gender">Female</td>
    <td class="hometown">Springfield</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td class="age">94</td>
    <td class="gender">Female</td>
    <td class="hometown">South Park</td>
  </tr>
</table>

Upvotes: 1

Views: 98

Answers (1)

Swati
Swati

Reputation: 28522

You need to loop through your radio button to hide other columns which are shown using $(this).val() which will give us radio button value and using this we will hide.

Demo Code :

$('input[type="radio"]').each(function() {
 //get the value of radio button
  var inputValue = "table ." + $(this).val();
  $(inputValue).hide();
});


$('input[type="radio"]').click(function() {
//first check all radio hide all other columns
  $('input[type="radio"]').each(function() {

    var inputValue = "table ." + $(this).val();
    $(inputValue).hide();
  });
  //show only the column which is clicked
  var inputValue = "table ." + $(this).attr("value");
  $(inputValue).toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Select a column to show. You can only show one extra column from the options below at a time.</p>
<input type="radio" name="extraCol" id="age" value="age">
<label for="age">Age</label>
<input type="radio" name="extraCol" id="gender" value="gender">
<label for="gender">Gender</label>
<input type="radio" name="extraCol" id="hometown" value="hometown">
<label for="hometown">Hometown</label>
<input type="radio" name="extraCol" id="off" value="off" checked>
<label for="off">Don't show</label>;

<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
    <th class="age">Age</th>
    <th class="gender">Gender</th>
    <th class="hometown">Hometown</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td class="age">50</td>
    <td class="gender">Female</td>
    <td class="hometown">Springfield</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td class="age">94</td>
    <td class="gender">Female</td>
    <td class="hometown">South Park</td>
  </tr>
</table>

Upvotes: 1

Related Questions