Множественные значения флажка появляются в табличном представлении, используя onchange в JavaScript - PullRequest
Новая
       52

Множественные значения флажка появляются в табличном представлении, используя onchange в JavaScript

0 голосов
/ 25 января 2019

Я хочу отобразить значения своих флажков, когда я нажимаю флажок Everyever change, значения обновляются в табличном представлении.Вот мой код: 

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

Выберите отображение каждого флажка в виде таблицы.Результат появится на той же странице. 

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

Ответы [ 2 ]

0 голосов
/ 25 января 2019 
             $(document).on('change', '.checkme', function () {
            var label = $(this).parent();  //<<== careful here, the checkbox is inside the label so you should NOT change the parent text, or should change the layout
            if ($(this).prop('checked')) {
                var checkBox = document.getElementById("checkbox1").value;  //<<== use this.value instead
                alert(checkBox);

            } else {
                 alert(checkBox);  // <<=== this checkbox is undefined (unreachable from other enclosure)
            }

        });

лучший способ: 

<!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>
    <input class="checkme" type="checkbox" value = "1111" id="checkbox1"><label for="checkbox1">  Checkbox 1</label><br>  <!--NEW -->
    <input class="checkme" type="checkbox" value = "2222" id="checkbox2"><label for="checkbox2"> Checkbox 2</label><br>  <!--NEW -->
    <input class="checkme" type="checkbox" value = "3333" id="checkbox3"><label for="checkbox3"> Checkbox 3</label><br>  <!--NEW -->
    <label for="checkbox4"> <input class="checkme" type="checkbox" value = "4444" id="checkbox4"> Checkbox 4</label><br>  <!--OLD/BAD -->
    <label for="checkbox5"> <input class="checkme" type="checkbox" value = "5555" id="checkbox5"> Checkbox 5</label><br> <!--OLD/BAD -->
    <label for="checkbox6"> <input class="checkme" type="checkbox" value = "6666" id="checkbox6"> Checkbox 6</label><br> <!--OLD/BAD -->
    <label for="checkbox7"> <input class="checkme" type="checkbox" value = "7777" id="checkbox7"> Checkbox 7</label><br> <!--OLD/BAD -->
    <script>
         $(document).on('change', '.checkme', function () {
            var label = $(this).next(); //label is next element after this checkbox
            var checkBox = this.value;
            if ($(this).prop('checked')) {
                // alert(checkBox);
                label.text("checked, " + checkBox);

            } else {
                label.text("not checked, " + checkBox);
                //  alert(checkBox);
            }

        });
    </script>
0 голосов
/ 25 января 2019

Вы можете использовать $(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>
...