Получить переключение входного значения для переключения просмотра страницы с помощью jQuery

Question

Я занимаюсь разработкой веб-фотогалереи и хочу добавить переключающую кнопку ввода для переключения между отображением альбомов или отображением всех фотографий.Мне нужно получить значение ввода с помощью jQuery и выполнить AjaxCall, чтобы перезагрузить содержимое с соответствующим дисплеем.

У меня есть

<script>
        $("document").ready(function () {
            $("#VistaToggle").toggle(function () {
                $("#valor1").text($(this).val())
                {% comment %}if ($(this).val() == "Vista Álbum"){
                    $("#valor1").text("Vista Álbum")
                }
                else
                {
                    $("#valor1").text("Vista Fotos")
                }{% endcomment %}
            })
        });

    </script>

<div class="container-fluid" align="center">
        <input id="VistaToggle" type="checkbox" checked data-toggle="toggle" data-size=="large" data-on="Vista Álbum" data-off="Vista Fotos"  data-onstyle="success" data-offstyle="danger">
        <p id="valor1">El estado actual es:</p>
    </div>

Я пытаюсь перехватить событие изменения входа переключения и обновить значение текста.

Answer 1

Если вы хотите захватить событие изменения, сделайте это.А поскольку ваш текст находится в вашем флажке в качестве атрибутов данных, вы также можете ссылаться на них в своем сценарии.

$("document").ready(function () {
    $("#VistaToggle").on('change', function () {
      if (this.checked) {
        $("#valor1").text(this.getAttribute('data-on'));
      } else {
        $("#valor1").text(this.getAttribute('data-off'));
      }
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" align="center">
        <input id="VistaToggle" type="checkbox" checked data-toggle="toggle" data-size=="large" data-on="Vista Álbum" data-off="Vista Fotos"  data-onstyle="success" data-offstyle="danger">
        <p id="valor1">El estado actual es:</p>
    </div>