How to use toggle() to update the UI on form change (e.g. when checkbox clicked)

Question

I created an HTML table from JSON with Javascript. Now I have added three checkboxes to filter the data table by party (Democrat, Republican, and Independent). My JS code got an error "$ is not defined"/ "on.()is not a function". I don't understand.

//Get a list of checkboxes
var options = new Array();
$('.checkbox input').each(function(){
  options.push($(this).attr('value'));
});  

function updateUI() {     
      $("#senate-data tbody tr").each(function () {
            var option = $(this).find(".Party").text();
            var optionSelected = isIncluded(option, options);
            $(this).toggle(optionSelected);
          });
        }
        
        // x is included if lst is empty or contains x
        function isIncluded(x, lst) {
          return lst.length === 0 || lst.indexOf(x) != -1;
        }
        
        
        $("input[name='option']").on("change",updateUI);

<div class="checkbox">

  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="option" value="R">
  <label class="form-check-label" for="inlineCheckbox1">Republican</label>
 

   <input class="form-check-input" type="checkbox" id="inlineCheckbox2" name="option" value="D">
   <label class="form-check-label" for="inlineCheckbox2">Democrat</label>


   <input class="form-check-input" type="checkbox" id="inlineCheckbox3" name="option" value="I">
   <label class="form-check-label" for="inlineCheckbox3">Independent</label>

</div>


<div id="senate-data">
<table>
    <tbody>
        <tr>
            <th>Name</th>
            <th>Party</th>
            <th>State</th>
            <th>Seniority</th>
            <th>Perentage of votes</th>
        </tr>
    </tbody>
    <tr>
        <td>Alex</td>
        <td class="Party">D</td>
        <td>TN</td>
        <td>11</td>
        <td>80%</td>
    </tr>

    <tr>
        <td>Ammy</td>
        <td class="Party">R</td>
        <td>NY</td>
        <td>2</td>
        <td>30%</td>
    </tr>

    <tr>
        <td>Jammy</td>
        <td class="Party">R</td>
        <td>XX</td>
        <td>XX</td>
        <td>XX</td>
    </tr>
</table>

I think @MaxZoom is right. I don't know if the code you are working with in your machine is the same as this or not, but your above code snippet does not include jQuery. — Rich, May 14 '18 at 14:28
Sorry, I had a wrong JQuery. Now I have JQuery on my page but my code is still not working. — Tracy chan, May 14 '18 at 14:30
`$("#senate-data tbody tr")` This part should be changed to `$("#senate-data tr td")` — Tracy chan, May 14 '18 at 14:36
Not working how? Are you still experiencing the same issue? While the code may or may not be logically correct, I do not see any syntax errors, apart from the obvious missing library. — Rich, May 14 '18 at 14:42
I have solved my problem. Thanks. If you are curious see the second answer below. — Tracy chan, May 15 '18 at 10:17

score 0 · Accepted Answer · answered May 15 '18 at 10:16

This code worked just fine.

I changed this part:

 var options = new Array();
$('.checkbox input').each(function(){
  options.push($(this).attr('value'));
});

into:

 var options = $("input[name='option']:checked")
            .map(function () { return $(this).val(); })
            .get();

//I've created a `tbody` and given it a class name `.dataTable`
$("#senate-data .dataTable tr").each(function () {
        var option = $(this).find(".Party").text();
        var optionSelected = isIncluded(option,options);
        $(this).toggle(optionSelected);
      });
    }
    
   
    function isIncluded(x,lst) {
      return lst.length === 0 || lst.indexOf(x) != -1;;
    }

    $("input[name='option']").on("change",updateUI);

<div class="checkbox">

  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="option" value="R">
  <label class="form-check-label" for="inlineCheckbox1">Republican</label>
 

   <input class="form-check-input" type="checkbox" id="inlineCheckbox2" name="option" value="D">
   <label class="form-check-label" for="inlineCheckbox2">Democrat</label>


   <input class="form-check-input" type="checkbox" id="inlineCheckbox3" name="option" value="I">
   <label class="form-check-label" for="inlineCheckbox3">Independent</label>

</div>


<div id="senate-data">
<table>
    <tbody>
        <tr>
            <th>Name</th>
            <th>Party</th>
            <th>State</th>
            <th>Seniority</th>
            <th>Perentage of votes</th>
        </tr>
    </tbody>
  <tbody class=dataTable>
    <tr>
        <td>Alex</td>
        <td class="Party">D</td>
        <td>TN</td>
        <td>11</td>
        <td>80%</td>
    </tr>

    <tr>
        <td>Ammy</td>
        <td class="Party">R</td>
        <td>NY</td>
        <td>2</td>
        <td>30%</td>
    </tr>

    <tr>
        <td>Jammy</td>
        <td class="Party">R</td>
        <td>XX</td>
        <td>XX</td>
        <td>XX</td>
    </tr>
   </tbody>
</table>

For future reference, tags are for the **body** of the table, as in the individual data rows. is for the **header**. So in the above solution you provided, it is incorrect to use the first tbody in the way you do. It should be thead. See [this SO question](https://stackoverflow.com/questions/5395228/html-tables-thead-vs-th) for more information. — Rich, May 15 '18 at 13:28
Yes, I realized this issue. When I created the table header with JS, it somehow appended it to the and I don't know how to change it to . I tried to. — Tracy chan, May 16 '18 at 09:36

How to use toggle() to update the UI on form change (e.g. when checkbox clicked)

1 Answers1