Question

如何将onChange事件添加到以下内容中，以便每次更新行时都会计算表行。

我有用于显示/隐藏行的复选框，每次用户更改复选框选项时我都需要计算行数。

抱歉，我是JavaScript的新手。

＆＃13;

document.getElementById('rowscount').innerHTML = $('tr:visible').length-1

    function MortgageTypeCheckbox(row){
    var bHide = true;
    $('#type input[type=checkbox]:checked').each(function(){
        var chkValue = $(this).val();
        console.log(chkValue);
        if($(row).find('td.'+chkValue).length){
            bHide = false;
            return false;
        }
    });
    
    return bHide;
}
function FeeCheckbox(row){
    var bHide = true;
    $('#fee input[type=checkbox]:checked').each(function(){
        var chkValue = $(this).val();
        console.log(chkValue);
        if($(row).find('td.'+chkValue).length){
            bHide = false;
            return false;
        }
    });
    
    return bHide;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <section id="type">

      <p id="Mortgage Type">Mortgage Type</p>
      <input type="checkbox" name="type" value="t2" id="t2" checked/>2yr Fixed<br>
      <input type="checkbox" name="type" value="t3" id="t3" checked/>3yr Fixed<br>
      <input type="checkbox" name="type" value="t5" id="t5" checked/>5yr Fixed<br>

    </section>
 
    <section id="fee">

    <p id="Fee">Fee</p>
    <input type="checkbox" name="fee" value="fee" id="fee" checked/>Fee<br>
    <input type="checkbox" name="fee" value="nofee" id="nofee" checked/>No Fee<br>

    </section>

    <p id="rowscount"></p>

        <table>

          <tr>
            <td>One</td>
            <td>Two</td>
          </tr>
          <tr>
            <td>One</td>
            <td>Two</td>
          </tr>

        </table>

＆＃13;

Answer 1

<强> HTML：

<p id="rowscount"></p>
<br>

    <table id="test">

      <tr class="visible">
        <td>One</td>
        <td>Two</td>
        <td><input type="checkbox"/></td>
      </tr>
      <tr class="visible">
        <td>One</td>
        <td>Two</td>
          <td><input type="checkbox"/></td>
      </tr>
<tr class="">
        <td>One</td>
        <td>Two</td>
          <td><input type="checkbox"/></td>
      </tr>
    </table>

<强> JS：

$(document).ready(function(){    
     var count = 0;
     $('input[type="checkbox"]').change(function() {  
         count = 0;
          $("#test tr").each(function(){
                if($(this).hasClass("visible"))
                {
                 count = count +1;

                }
            });           
            document.getElementById('rowscount').innerHTML = count;    
    });
});

DEMO。示例代码，因为你只想知道onChange将如何工作......是的代码在jquery中。您可以参考代码并根据需要进行调整......

使用onChange更新表行计数

1 个答案: