javascript - 如何使用toggle()在表单更改时更新UI(例如，当单击复选框时)

Question

我使用 Javascript 从 JSON 创建了一个 HTML 表。现在，我添加了三个复选框来按政党(民主党、共和党和独立党)过滤数据表。我的 JS 代码出现错误“$ 未定义”/“on.() 不是函数”。我不明白。

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

Answer 1

这段代码运行得很好。

我改变了这部分:

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

进入:

 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>