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

Optimizing js -Saving values from checkboxes in object

本文关键字：复选框 对象 js 保存 优化      更新时间：2023-09-26

我是相当新的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个复选框，所以会有很多重复的代码。有人知道更聪明的方法吗?

提前感谢!

Vin

  1. 将公共类添加到所有复选框
  2. 为所有复选框的值创建对象
  3. 使用公共类
    4. 在复选框上绑定事件处理程序
  4. 更新事件处理程序中选中复选框的状态

另外，最好在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>

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

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

这样做可以节省大量的输入:)

相关文章：