Javascript 如何从切换按钮“是/否”中获取值，并在按钮“活动”中显示“检索数据”

大家好

下面是显示切换按钮是/否的代码。我想做的是根据用户选择检索数据。如果他们选择是，切换按钮javascript变量应该有是字符串，否则没有字符串

HTML代码

<label class="switch">
  <input class="switch-input" type="checkbox" />
  <span class="switch-label" data-on="Yes" data-off="No"></span> 
  <span class="switch-handle"></span> 
 </label>

我将此代码从

下面是输出

我尝试使用此jquery获取：

 alert($(this).attr("data-on")); 

我不知道如何获取所选按钮数据，同样，在获取数据后，它将存储在数据库中，我想从数据库中检索是或否，它应被选为默认值，将从数据库中检索。我该如何处理此问题。我在jquery中尝试的结果是返回未定义的值。请任何人帮助我摆脱此问题问题。请提前感谢。

在纯JS中：

var result = document.getElementsByClassName("switch-input")[0].checked ? 'yes' : 'no'

兼容模式下的jQuery：

var result = jQuery('.switch-input').is(':checked')?'yes':'no';

试试这个：

(function() {
  $(document).ready(function() {
    $('.switch-input').on('change', function() {
      var isChecked = $(this).is(':checked');
      var selectedData;
      var $switchLabel = $('.switch-label');
      console.log('isChecked: ' + isChecked); 

      if(isChecked) {
        selectedData = $switchLabel.attr('data-on');
      } else {
        selectedData = $switchLabel.attr('data-off');
      }

      console.log('Selected data: ' + selectedData);

    });
  });

})();

参考：

我把上面的内容结合起来

$（'.switch input'）。打开（'change'，function（））{
结果=文档。GetElementsByCassName（“开关输入”）[0]。选中？“是”：“否”；
警报（结果）；
});

如果您想要更多-提供更多您在jquery中尝试过的代码，类似于上面的代码。请编写您的任务，而不是使用span id和data id以及data off等尝试的数据。请告诉我，您在控制台中拥有什么：jQuery.fn.jqueryYa正在工作..我想知道如何在按钮中显示数据库中保存的数据，例如，如果我在db中将其保存为“是”，我将在wan中将按钮默认选择显示为“是”，则此：

//Params（$selector，boolean）函数setSwitchState（el，flag）{el.attr（'checked'，flag）；}//用法设置开关状态（$（'.switch input'），true）；

>Ref:@kavyashrei要检查数据库结果并设置为是/否当您已经在使用jQuery时，如何执行此操作没有必要将其与纯javascript相结合。另外，下次，请花点时间在答案中格式化代码。@Magiczne每次切换按钮时都需要它。o只有在加载页面时，才会使用javascript提供数据。感谢您为我编辑代码。您不理解我的观点。为什么在jQuery函数中使用vanilla JS？接受的答案表明仅使用jQuery已经是更好的解决方案。如果您仅使用vanilla JS发布解决方案，则会为问题增加一些价值。此外，您的当页面上有多个

时，解决方案无效。请切换输入
。因为它总是从找到的第一个项目中获取值。
(function() {
  $(document).ready(function() {
    $('.switch-input').on('change', function() {
      var isChecked = $(this).is(':checked');
      var selectedData;
      var $switchLabel = $('.switch-label');
      console.log('isChecked: ' + isChecked); 

      if(isChecked) {
        selectedData = $switchLabel.attr('data-on');
      } else {
        selectedData = $switchLabel.attr('data-off');
      }

      console.log('Selected data: ' + selectedData);

    });
  });

})();