使用jquery动态构建数组

Question

我在html中有4个复选框。我想如果任何复选框被选中，它的值被存储在数组中。我创建了一个功能，但它显示了空数组

var arry = []; 
 

 
function CheckBox(check) { 
 
    debugger 
 

 
    for (i = 0; i < check.length; i++) { 
 
    if (check[i].checked == true) { 
 
     arry.push(check[i].value); 
 
     alert(arry); 
 
    } 
 
    } 
 

 
} 
 

 
$(document).ready(function() { 
 

 
    $("#btn").click(function() { 
 
    debugger; 
 
    alert(arry); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="checkbox" id="chk1" value="1" class="chk" onclick="CheckBox(this)" />1 
 
    <input type="checkbox" id="chk2" value="2" class="chk" onclick="CheckBox(this)" />2 
 
    <input type="checkbox" id="chk3" value="3" class="chk" onclick="CheckBox(this)" />3 
 
    <input type="checkbox" id="chk4" value="4" class="chk" onclick="CheckBox(this)" />4 
 
    <input type="button" id="btn" value="alert" /> 
 
</div>

Answer 1

1. 您可以使用.each()循环复选框
2. 使用.is(":checked")检查检查状态

$(document).ready(function() { 
 

 
    $("#btn").click(function() { 
 
    var arry = []; 
 
    $.each($(".chk"), function() { 
 
     if ($(this).is(":checked")) { 
 
     arry.push($(this).val()); 
 
     } 
 

 
    }) 
 
    console.log(arry) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="checkbox" id="chk1" value="1" class="chk" />1 
 
    <input type="checkbox" id="chk2" value="2" class="chk" />2 
 
    <input type="checkbox" id="chk3" value="3" class="chk" />3 
 
    <input type="checkbox" id="chk4" value="4" class="chk" />4 
 
    <input type="button" id="btn" value="alert" /> 
 
</div>

Answer 2

几个问题。最糟糕的是没有得到函数中的复选框。

你通过一个盒子，而不是一个盒子

var arry = []; 
 
function CheckBox(check) { 
 
    arry = []; 
 
    $("."+check.className).each(function() { // get the other checks 
 
    if (this.checked) { // or jQuery: $(this).is(":checked"); 
 
     arry.push(this.value); // or jQuery $(this).val() 
 
     alert(arry); 
 
    } 
 
    }) 
 
} 
 

 
$(document).ready(function() { 
 

 
    $("#btn").click(function() { 
 
    alert(arry); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="checkbox" id="chk1" value="1" class="chk" onclick="CheckBox(this)" />1 
 
    <input type="checkbox" id="chk2" value="2" class="chk" onclick="CheckBox(this)" />2 
 
    <input type="checkbox" id="chk3" value="3" class="chk" onclick="CheckBox(this)" />3 
 
    <input type="checkbox" id="chk4" value="4" class="chk" onclick="CheckBox(this)" />4 
 
    <input type="button" id="btn" value="alert" /> 
 
</div>

Answer 3

添加下面的变化，你的JavaScript/jQuery代码

$("#btn").click(function() { 
    var arry = []; 
    $.each($(".chk"), function() { 
     if ($(this).is(":checked")) { 
     arry.push($(this).val()); 
     } 

    }) 
    alert(arry) 
    }); 
});