如何为引导开关分配值？答案

【问题标题】：how to assign values to bootstrap switch?如何为引导开关分配值？
【发布时间】：2018-06-07 10:37:18
【问题描述】：

以下是我的引导开关和“保存”按钮的代码。首先，我希望用户使用我的引导开关并选择“开”或“关”状态。一旦用户选择了一个状态，他将点击提交按钮。如果用户单击“on”，我将创建值为“true”的属性“value”。如果用户单击“关闭”，我将创建值为“false”的属性“value”。然后，我将向 API 方法发出一个带有属性值的 post HTTP 请求，以将该值插入到数据库中的正确表中。但是，即使用户单击“on”，我仍然会收到“false”值

$('#saveButton').on('click', function () {

        var $collectedIsVisible = '';
    
        if ($('#testInput').is(':checked')) {

            $collectedIsVisible = $('#testInput').attr('value', 'true');           
        }
        else {
            $collectedIsVisible = $('#testInput').attr('value', 'false');         
        }

<label class="control-label col-md-4" for="testInput">Yes or No</label>
<input type="checkbox" id="testInput" name="testInput" checked/>

<input type="button" class="btn btn-primary" value="Save" id="saveButton" />

【问题讨论】：

我试过了，在web api方法中，即使用户点击“关闭”，checkbox的值也总是为true
（您知道，通过正常的表单提交，您将不会得到任何名称=值对的未选中复选框，对吧？）
有大量插件具有用于复选框的 bs-switch UI。如果您喜欢使用，请查看 bootstraptoggle.com。

标签： javascript jquery html

【解决方案1】：

$('#saveButton').on('click', function () {

        var $collectedIsVisible = '';
    
        if ($('#testInput').is(':checked')) {

            $collectedIsVisible = $('#testInput').attr('value', 'true');           
        }
        else {
            $collectedIsVisible = $('#testInput').attr('value', 'false');         
        }

<label class="control-label col-md-4" for="testInput">Yes or No</label>
<input type="checkbox" id="testInput" name="testInput" checked/>

<input type="button" class="btn btn-primary" onClick="save();" value="Save" id="saveButton" />

【讨论】：

【解决方案2】：

您使用 $ jquery 声明变量的第一件事并不意味着您必须使用 'var' 关键字。其次，您可以在制作“collectedIsVisible”时创建一个变量，而不是设置复选框值属性，并将此变量传递给您的 AJAX 调用。您可以使用此代码...

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $('#saveButton').on('click', function () {

        var collectedIsVisible = '';
    
        if ($('#testInput').is(':checked')) {

         collectedIsVisible = true; 
          console.log(collectedIsVisible);
        }
        else {
            collectedIsVisible = false 
          console.log(collectedIsVisible);
        }       
        });
});

</script>
</head>
<body>
<label class="control-label col-md-4" for="testInput">Yes or No</label>
<input type="checkbox" id="testInput" name="testInput" checked/>

<input type="button" class="btn btn-primary" value="Save" id="saveButton" />

</body>
</html>

希望这对你有帮助。

【讨论】：