我对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个复选框,因此会有很多重复的代码。
有谁知道更聪明的方式做到这一点?

提前致谢!

最佳答案

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


同样,将事件绑定在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>

关于javascript - 优化js-保存对象中复选框的值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31803942/

10-12 01:26
查看更多