javascript - 使用 javascript 中的 onchange 在 TableView 中显示多个复选框值

标签 javascript checkbox onclick onchange

我想在单击时显示我的复选框值, 每当更改复选框时, TableView 上的值都会更新。 这是我的代码:

<!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="utf-8">
        <title>Get Values of Selected Checboxes</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <label for="checkbox1"> <input class="checkme" type="checkbox" value = "1111" id="checkbox1"> Checkbox 1</label><br>
        <label for="checkbox2"> <input class="checkme" type="checkbox" value = "2222" id="checkbox2"> Checkbox 2</label><br>
        <label for="checkbox3"> <input class="checkme" type="checkbox" value = "3333" id="checkbox3"> Checkbox 3</label><br>
        <label for="checkbox4"> <input class="checkme" type="checkbox" value = "4444" id="checkbox4"> Checkbox 4</label><br>
        <label for="checkbox5"> <input class="checkme" type="checkbox" value = "5555" id="checkbox5"> Checkbox 5</label><br>
        <label for="checkbox6"> <input class="checkme" type="checkbox" value = "6666" id="checkbox6"> Checkbox 6</label><br>
        <label for="checkbox7"> <input class="checkme" type="checkbox" value = "7777" id="checkbox7"> Checkbox 7</label><br>
        <script>
             $(document).on('change', '.checkme', function () {
                var label = $(this).parent();
                if ($(this).prop('checked')) {
                    var checkBox = document.getElementById("checkbox").value;
                    alert(checkBox);

                } else {
                     alert(checkBox);
                }

            });
        </script>

选择每个复选框值显示为表格 View 。结果将显示在同一页面上。

The result like this:
----------------------------
Value
----------------------------
My Check Box Value is: 1111
My Check Box Value is: 2222
My Check Box Value is: 3333
My Check Box Value is: 4444
----------------------------

最佳答案

您可以使用$(this)来获取值

$(document).on('change', '.checkme', function () {
    var label = $(this).parent();
    if ($(this).prop('checked')) {
        var checkBox =$(this).val();
        alert(checkBox);
    } else {
         alert('Un checked');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label for="checkbox1"> <input class="checkme" type="checkbox" value = "1111" id="checkbox1"> Checkbox 1</label><br>
<label for="checkbox2"> <input class="checkme" type="checkbox" value = "2222" id="checkbox2"> Checkbox 2</label><br>
<label for="checkbox3"> <input class="checkme" type="checkbox" value = "3333" id="checkbox3"> Checkbox 3</label><br>
<label for="checkbox4"> <input class="checkme" type="checkbox" value = "4444" id="checkbox4"> Checkbox 4</label><br>
<label for="checkbox5"> <input class="checkme" type="checkbox" value = "5555" id="checkbox5"> Checkbox 5</label><br>
<label for="checkbox6"> <input class="checkme" type="checkbox" value = "6666" id="checkbox6"> Checkbox 6</label><br>
<label for="checkbox7"> <input class="checkme" type="checkbox" value = "7777" id="checkbox7"> Checkbox 7</label><br>

关于javascript - 使用 javascript 中的 onchange 在 TableView 中显示多个复选框值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54362404/

相关文章:

jquery - 至少选择一个复选框 - Asp.Net MVC - jQuery

android - 如何使整行 ListView 可点击?

javascript - 选择所有复选框在 Internet Explorer 9 上不起作用

ios - 在 webView Objective C 的 ASP 页面上检测 onclick

javascript - 在 Javascript 中通过 onclick 调用多个函数的最佳方法是什么

javascript - 如何使用javascript根据特定要求验证表达式?

javascript - 位置:absolute的相对定位

javascript - 尝试根据具有指定类别的字段检查空白字段

javascript - 如何在滚动时关闭 Shopify Ajax 购物车?

Android onClickListener 不触发 subview