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个复选框，因此会有很多重复的代码。有谁知道更聪明的方法吗？

提前致谢！

VIN

Answer 1

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

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

玩这个可以节省很多打字：）

Answer 2

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

此外，最好将事件用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 -Saving值

2 个答案: