我有下表,其中包含 3 行,在每一行中,我放置了一个复选框,我在value属性中为其分配了一个值,我需要做的是检查复选框并确定选择哪些复选框来保存它们的值在一个数组中,然后将它们显示在一个 div 中。
html代码:
<table>
<tr>
<td>A</td>
<td>A1<input type="checkbox" class="chk_asiento" value="A1"></td>
<td>A2<input type="checkbox" class="chk_asiento" value="A2"></td>
<td>A3<input type="checkbox" class="chk_asiento" value="A3"></td>
<td>A4<input type="checkbox" class="chk_asiento" value="A4"></td>
<td>A5<input type="checkbox" class="chk_asiento" value="A5"></td>
<td>A6<input type="checkbox" class="chk_asiento" value="A6"></td>
<td>A7<input type="checkbox" class="chk_asiento" value="A7"></td>
<td>A8<input type="checkbox" class="chk_asiento" value="A8"></td>
<td>A9<input type="checkbox" class="chk_asiento" value="A9"></td>
<td>A10<input type="checkbox" class="chk_asiento" value="A10"></td>
<td>A</td>
</tr>
<tr>
<td>B</td>
<td>B1<input type="checkbox" class="chk_asiento" value="B1"></td>
<td>B2<input type="checkbox" class="chk_asiento" value="B2"></td>
<td>B3<input type="checkbox" class="chk_asiento" value="B3"></td>
<td>B4<input type="checkbox" class="chk_asiento" value="B4"></td>
<td>B5<input type="checkbox" class="chk_asiento" value="B5"></td>
<td>B6<input type="checkbox" class="chk_asiento" value="B6"></td>
<td>B7<input type="checkbox" class="chk_asiento" value="B7"></td>
<td>B8<input type="checkbox" class="chk_asiento" value="B8"></td>
<td>B9<input type="checkbox" class="chk_asiento" value="B9"></td>
<td>B10<input type="checkbox" class="chk_asiento" value="B10"></td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>C1<input type="checkbox" class="chk_asiento" value="C1"></td>
<td>C2<input type="checkbox" class="chk_asiento" value="C2"></td>
<td>C3<input type="checkbox" class="chk_asiento" value="C3"></td>
<td>C4<input type="checkbox" class="chk_asiento" value="C4"></td>
<td>C5<input type="checkbox" class="chk_asiento" value="C5"></td>
<td>C6<input type="checkbox" class="chk_asiento" value="C6"></td>
<td>C7<input type="checkbox" class="chk_asiento" value="C7"></td>
<td>C8<input type="checkbox" class="chk_asiento" value="C8"></td>
<td>C9<input type="checkbox" class="chk_asiento" value="C9"></td>
<td>C10<input type="checkbox" class="chk_asiento" value="C10"></td>
<td>C</td>
</tr>
</table>
JavaScript 代码:
<script>
var chkAsientos = document.getElementsByClassName("chk_asiento")[0];
var divAsientos = document.getElementById("div_asientos");
var asientos = [];
function asignar()
{
chkAsientos.forEach(function(){
if(this.checked)
asientos.push(this.value);
});
divAsientos.innerHTML = "<b>Tus asientos:</b> ";
var lugares = "";
for(var i = 0; i < asientos.length; i++)
{
if(lugares == "")
lugares = asientos[i];
else
lugares = lugares + ", " + asientos[i];
}
divAsientos.innerHTML += lugares;
}
</script>
使用 JQuery 我会这样做:
<script>
var asientos = [];
function asignar()
{
$(".chk_asiento").each(function()
{
if($(this).prop('checked'))
asientos.push($(this).val());
});
var titulo = "<b>Tus asientos:</b> ";
var lugares = "";
for(var i = 0; i < asientos.length; i++)
{
if(lugares == "")
lugares = asientos[i];
else
lugares = lugares + ", " + asientos[i];
}
$("#div_asientos").html(titulo + lugares);
}
</script>
我怎么能只使用 JavaScript 来做到这一点?谢谢您的帮助!!!!
只有使用 javascript,您的分配功能应该是这样的:
请注意在您分配 chkSeats 的第一行中的更正,在您的代码中您只使用 [0] 获取第一个元素