JavaScript & Checkbox - 存储每个复选框值的更有效方法？

Question

有没有更有效的方法来存储我的复选框值？

每个复选框都有一个分配的值，我想知道是否有更好的方法来存储这些值（destinationoflink1,2,3等）？ 也许将它们存储为数组并调用它们?...虽然我不确定

网页提取：

    <form>
        <label for="checkbox1">Link #1</label>
        <input type="checkbox" id="checkbox1" value="http://www.destinationoflink1.com">
        <label for="checkbox2">Link #2</label>
        <input type="checkbox" id="checkbox2" value="http://www.destinationoflink2.com">
        <label for="checkbox3">Link #3</label>
        <input type="checkbox" id="checkbox3" value="http://www.destinationoflink3.com">
        <input type="button" value="open links" id="open_link"/>
    </form>

Javascript文件提取（如果有用）：

$("#open_link").click(function() {
    performOpenLink();
})
function performOpenLink(){
$("input[type=checkbox]").each(function() {
        if (this.checked) {
            window.open(this.value)
        }
    });
}

Answer 1

您可以使用数组动态生成复选框

修改后的网页

<form>
    <div id="checkbox_container"></div>    
    <input type="button" value="open links" id="open_link"/>
</form>

---

修改后的JavaScript

var destinations = [
    {'label': 'Checkbox1', 'value' : 'http://www.destinationoflink1.com'},
    {'label': 'Checkbox2', 'value' : 'http://www.destinationoflink2.com'},
    {'label': 'Checkbox3', 'value' : 'http://www.destinationoflink3.com'}
];
$(function(){
    // document onReady
    for (var i=0; i<destinations.length; i++){
        // add the label:
        $('#checkbox_container').append('<label for="' + destinations[i].label + '">Link #' + i + '</label>');
        // add the checkbox:
        $('#checkbox_container').append('<input type="checkbox" id="'+ destinations[i].label+'" value="' + destinations[i].value + '" >');
    }
});
$("#open_link").click(function() {
    performOpenLink();
});
function performOpenLink(){
    $("input[type=checkbox]").each(function() {
        if (this.checked) {
            window.open(this.value)
        }
    });
}

---

这将遍历数组并根据每个数组项的属性构建label和checklist html。通过将值放入数组中，以后应该可以更轻松地添加（或删除）新的清单值

这是一个jsFiddle

---

更新：我修复了我在代码中留下this的问题。替换为destinations[i]

Answer 2

这是另一种方法...

$("#open_link").click(function(e) {
    e.preventDefault();
    $.each($("input[type=checkbox]:checked"), function(index, item){
        window.open( item.value, index );
    });
});

这是小提琴

它不会在chrome中打开多个选项卡，但它在Firefox（对我来说是v38.0）中完美运行。