优化 js - 从对象中的复选框保存值

Question

我对 js 比较陌生，我想优化我的代码。我有一组复选框，它们的布尔值保存在一个对象中以供进一步计算。

HTML:

<fieldset>
    <input type="checkbox" id="checkbox1" onchange="checkbox1Changed()" value="checkbox1">

    <input type="checkbox" id="checkbox2" onchange="checkbox2Changed()" value="checkbox2">

    <input type="checkbox" id="checkbox3" onchange="checkbox3Changed()" value="checkbox3">
</fieldset>

JS:

//store values for further computation

var boxValues = {
    box1: false,
    box2: false,
    box3: false,
}

//get checkboxvalues from view

var checkbox1 = document.getElementById("checkbox1");
var checkbox2 = document.getElementById("checkbox2");
var checkbox3 = document.getElementById("checkbox3");

//update values in boxValues

function checkbox1Changed() {
    if (checkbox1.checked) {
        boxValues.box1 = true;
    } else {
        boxValues.box1 = false;
    }
}

function checkbox2Changed() {
    if (checkbox2.checked) {
        boxValues.box2 = true;
    } else {
        boxValues.box2 = false;
    }
}

function checkbox3Changed() {
    if (checkbox3.checked) {
        boxValues.box3 = true;
    } else {
        boxValues.box3 = false;
    }
}

因为我计划在视图中有大约 20 个复选框，所以会有很多重复代码。有谁知道更聪明的方法吗？

提前致谢！

文

Answer 1

您可以将相同的功能绑定到每个复选框，并使用复选框的 id 作为对象中的键：

function onCheckBoxChanged(e){
  var sender = e.target;
  boxValues[sender.id] = (sender.checked);
}

尝试一下这个应该可以节省您大量的输入:)

Answer 2

将common class 添加到所有复选框
为所有复选框的值创建一个对象
使用 common class
更新事件处理程序中单击复选框的状态

此外，最好在 javascript 中绑定事件而不是在 HTML 中内联。

var myObj = {
  checkbox1: false,
  checkbox2: false,
  checkbox3: false
};
$('.myCheckbox').on('change', function() {
  var thisId = $(this).attr('id');

  myObj[thisId] = this.checked;

  console.log(myObj);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<fieldset>
  <input type="checkbox" id="checkbox1" value="checkbox1" class="myCheckbox">

  <input type="checkbox" id="checkbox2" value="checkbox2" class="myCheckbox">

  <input type="checkbox" id="checkbox3" value="checkbox3" class="myCheckbox">
</fieldset>

优化 js - 从对象中的复选框保存值

Optimizing js -Saving values from checkboxes in object

html

javascript

checkbox

jquery

design-patterns