选中复选框时有效地创建变量并稍后在代码中使用这些变量

Question

以下是我需要帮助的信息。

$(document).ready(function(){
        $('.checkboxes :checkbox').click(function(){
            if($(this).is(':checked')){
                console.log(this.id + this.checked)

我想设置一个与选中框的id同名的变量所以如果 showItems 被选中，我会有一个变量 var showItems = true; 我想要这个，这样我就可以查看是否检查了 showItems，这将使我能够执行正确的功能我想我可以做这样的事情

                if($this.id = "withones"){
                    var withones = true;//on
                }
                if($this.id = "withoutOnes"){
                    var withoutOnes = true;//on
                }
                etc.

感觉以上是菜鸟的编码方式。可以说我有很多复选框，而且看起来我也在重复自己。我尝试将 id 放入一个数组中并循环遍历它们，但是当我单击该框时，我在控制台中得到了 html 元素。我希望有人告诉我是否有更有效的方法来设置这些变量。如果可以，请告诉我。

另外，我是编程新手，所以感谢您到目前为止的帮助。但我也在考虑另一个问题。如果我在这里设置了这些变量，并且我想在其他地方设置另一个函数来执行本身的数学运算。我希望该函数能够评估 withones 和 withones 变量的值，所以我想在函数

中做这样的事情

function add(){
                    if(withones){ //true|| false
                        return 2 + 2;
                    }
                    if (withoutOnes) {
                        return 'blah'
                    };
                }

我过去在尝试测试在函数外部设置的值时遇到过问题。我想我试着在参数中设置它。但它就是不读。如果您还可以向我展示一个在上面讨论的代码中的其他地方使用变量的示例，那将很有帮助。我忘了提到当用户点击框时变量的值会改变。要么是真的，要么是假的。我想我过去的问题是，当复选框被选中然后取消选中时，我在更改变量时遇到了问题，尤其是当它在单独的函数中使用时

            }
        });
    });

Answer 1

您可以使用您的变量创建一个对象，然后动态地将变量添加到该对象：

var oVars = {}

// 添加一个变量 oVars[nameVar] = valueVar

// 访问变量 oVars[nameVar]

Answer 2

您可以使用 attr() 捕获 ID，或者您可以使用 jQuery 中的 val() 方法更改复选框的值，如下所示：FIDDLE

$(document).ready(function () {

    $('.checkboxes').change(function (event) {
        if ($(this).is(':checked')) {
            var captureId = $(this).attr('id');
            $(this).val(true);
            alert($(this).val());
        }
        else {$(this).val(false);
              alert($(this).val());}
    });
});

请注意，您稍后可以使用一个按钮评估所有复选框，并从中收集值 false 或 true。你为什么要经历变量值变化的所有复杂问题。

Answer 3

其他两个答案是正确的，尽管听起来您想大致了解如何根据类型使用不同的方法来管理大量复选框。它可能看起来像这样：

function multiply(this_object){
      if((this_object.is(':checked')) && (this_object.attr("with") == 1))
          return "with withone and checked";
      else
          return "is not both";
}


$(document).ready(function(){
    $('.checkboxes').click(function(){
       var this_object = $(this);
       alert(multiply(this_object));

    });
});

应该没有必要将所有值都存储在一个变量中，除非您将它们全部传递到另一个页面 - 例如，通过 AJAX。直接从源字段中引用它们。如果您需要同时存储其他信息，请在该字段上创建一个新属性 - 就像我为此示例创建的 "with" 一样。看到这个Fiddle：http://jsfiddle.net/6ug6gL97/

Answer 4

你的问题很宽泛；所以我会尽力给你一些答案。首先，我会使用 global scope when declaring variables: withones and withoutOnes. Secondly, you wanted to avoid repetition in your code. Well, for that purpose I’d use JavaScript Arrays. In an array, you can add your variables as objects 的变量。在一个对象中，您可以将您的 ID 和其他数据整齐地“打包”在数组中，这反过来又有助于您的代码变得高效。下面是一个包含对象的数组：

objectArray = [{
    id: "withones",
    checked: false,
    method: function () {
        return 2 + 2;
    }
}, {
    id: "withoutOnes",
    checked: false,
    method: function () {
        return 'blah';
    }
}];

以上数组可用于您的 $('.checkboxes :checkbox').click(function() 处理程序和 add() 函数以避免重复。更新后的代码如下，其中 jQuery 的 each() 方法用于循环数组元素。

您的最后一点问题与 add() 功能有关。好吧，这是你的问题的棘手之处，我试图以正确的方式使用回调函数来从数组中执行你的函数。在添加方法中，我尝试遵循以下答案：

关于最后一点，我不是 100% 确定我是否以正确的方式使用了回调函数；所以我希望更熟悉这些棘手的 JavaScript 函数的人可以纠正我，如果需要更改某些内容 – 谢谢。

objectArray = [{
    id: "withones",
    checked: false,
    method: function () {
        return 2 + 2;
    }
}, {
    id: "withoutOnes",
    checked: false,
    method: function () {
        return 'blah';
    }
}];


$(document).ready(function () {
    $('.checkboxes :checkbox').click(function () {
      
        var id = this.id;
        var checkedValue = this.checked;

        $.each(objectArray, function (index, object) {
            if (object.id === id) {
                object.checked = checkedValue;
            }
        });

        add();
    });

    function add() {
        // clear results      
        $("#addResults").text("");
      
        $.each(objectArray, function (index, object) {

            if (object.checked === true) {
              
                var returnValue = createCallback(object.method)
                
                 $("#addResults").append(returnValue + "<br>");

                console.log(returnValue);
            }
        });
    }

    function createCallback(method) {
            return method();
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="checkboxes">
    <input type="checkbox" id="withones"></input>
    <label>With Ones</label>
    <br>
    <input type="checkbox" id="withoutOnes"></input>
    <label>Without Ones</label>
</div>

<div id="addResults">

</div>

选中复选框时有效地创建变量并稍后在代码中使用这些变量

efficiently creating variables when a checkbox is checked and using these variables later in the code

javascript

checkbox

jquery