如何使用 jQuery 创建基于复选框的计算函数？

发布于 2025-01-11 10:35:42 字数 850 浏览 0 评论 0原文

我的表中有几个复选框（数量未指定），并为每个复选框设置值 2000。我希望选中的每个复选框都乘以 2000，如果未选中，则从总金额中扣除 2000？

例如，如果选中 3 个复选框，则数字 3 乘以 2000 ，3 * 2000。而如果不勾选这个数字的话，它的值会从总数中扣除吗？

并在span中显示总值？

<table class="table">
<thead>
    <tr>             
        <th>
           choose
        </th>
    </tr>
</thead>
<tbody>
    @foreach (var item in listitem)
    {
        <tr>                                                 
           
            <td>
                <input class="check-horse mr-2" type="checkbox" autocomplete="off" />
            </td>

        </tr>
    }
</tbody>

total price :<span class="text-success totalprice"></span>

原文

I have several checkboxes in my table (unspecified number) and set a value of 2000 for each checkbox.
I want each check box that was checked to be multiplied by 2000 and if it was unchecked 2000 be deducted from the total amount?

For example, if 3 checkboxes are checked, the number 3 is multiplied by 2000 ,3 * 2000.
And if it is unchecked from this number, its value will be deducted from the total?

And display the total value in span?

<table class="table">
<thead>
    <tr>             
        <th>
           choose
        </th>
    </tr>
</thead>
<tbody>
    @foreach (var item in listitem)
    {
        <tr>                                                 
           
            <td>
                <input class="check-horse mr-2" type="checkbox" autocomplete="off" />
            </td>

        </tr>
    }
</tbody>

total price :<span class="text-success totalprice"></span>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千と千尋 2025-01-18 10:35:42

您只需使用 :checked 伪选择器即可获取选中的复选框，

const multiplier = 2000;
function getTotalPrice(){
    const checkedCount = $('.check-horse:checked').length;
    return checkedCount * multiplier;
}

$(document).on('change','.check-horse', e=> $('.totalprice').text(getTotalPrice());

它应该按预期工作。

You can get the checked checkbox simply by using :checked pseudo selector

const multiplier = 2000;
function getTotalPrice(){
    const checkedCount = $('.check-horse:checked').length;
    return checkedCount * multiplier;
}

$(document).on('change','.check-horse', e=> $('.totalprice').text(getTotalPrice());

It should work as expected.

回复收藏 0 原文

如果没结果 2025-01-18 10:35:42

详细信息在下面的示例中注释。请注意，每个复选框的值已指定为 2000。此外，使用代替，它是一个内联标记并且可以包含类似的文本，但与不同，也可以有value 就像表单控件一样（例如、

/*
Whenever the user changes the state of any checkbox the event
handler chkSum(e) is invoked
*/
$(':checkbox').on('change', chkSum);

// Event handler is a function that listens for events
function chkSum(e) {
  // Define a 0 value in outer scope
  let total = 0;
  // On each checkbox that's CHECKED...
  $(':checkbox:checked').each(function() {
    // Add the checkbox value (converted into a real number) to total
    total += Number($(this).val());
  });
  /* 
  After iterations display total value 
  output.total can also use .val()
  */
  $('.total').text(total);
};

<fieldset>
  <output class='total'>0</output><br>
  <input type='checkbox' value='2000'><br>
  <input type='checkbox' value='2000'><br>
  <input type='checkbox' value='2000'><br>
  <input type='checkbox' value='2000'><br>
  <input type='checkbox' value='2000'><br>
  <input type='checkbox' value='2000'><br>
</fieldset>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Details are commented in example below. Note, the value of each checkbox has been assigned as 2000. Also instead of a <span>, an <output> is used -- it is an inline tag and can contain text like a <span>, but unlike the <span> an <output> can also have a value like a form-control (ex. <input>, <select>, etc.).

/*
Whenever the user changes the state of any checkbox the event
handler chkSum(e) is invoked
*/
$(':checkbox').on('change', chkSum);

// Event handler is a function that listens for events
function chkSum(e) {
  // Define a 0 value in outer scope
  let total = 0;
  // On each checkbox that's CHECKED...
  $(':checkbox:checked').each(function() {
    // Add the checkbox value (converted into a real number) to total
    total += Number($(this).val());
  });
  /* 
  After iterations display total value 
  output.total can also use .val()
  */
  $('.total').text(total);
};

<fieldset>
  <output class='total'>0</output><br>
  <input type='checkbox' value='2000'><br>
  <input type='checkbox' value='2000'><br>
  <input type='checkbox' value='2000'><br>
  <input type='checkbox' value='2000'><br>
  <input type='checkbox' value='2000'><br>
  <input type='checkbox' value='2000'><br>
</fieldset>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

回复收藏 0 原文

~没有更多了~