【发布时间】：2021-08-27 13:29:39
【问题描述】：
如果我必须单击Show checked if id values are 1 and 5 按钮，则根据数组中的 id 值在表格中显示检查时出现问题。例如，如果 id 值为 1 和 5，我想在表中显示选中。
但我使用下面的示例 javascript 编码无法在表格中显示选中的选中后跟 id 值：
Javascript
function show_value() {
var selected_value = "1,5";
var checkbox_state = []
var id_value = []
//use each loop
$("[name=checkbox_val]").each(function() {
checkbox_state.push($(this).is(":checked"))
id_value.push($(this).closest("tr").find("[name=id_value]").val()) //push value in array
$("#checkbox_val").attr("checked", true);
})
var id_value_true = id_value.toString();
if(jQuery.inArray(selected_value, id_value_true) !== -1){
$("#checkbox_val").attr("checked", true);
}else{
$("#checkbox_val").attr("checked", false);
}
console.log("checkbox -- " + checkbox_state.toString() + " ID VALUE --" + id_value.toString())
}
以下是我的整个示例编码：
function show_value() {
var selected_value = "1,5";
var checkbox_state = []
var id_value = []
//use each loop
$("[name=checkbox_val]").each(function() {
checkbox_state.push($(this).is(":checked"))
id_value.push($(this).closest("tr").find("[name=id_value]").val()) //push value in array
$("#checkbox_val").attr("checked", true);
})
var id_value_true = id_value.toString();
if(jQuery.inArray(selected_value, id_value_true) !== -1){
$("#checkbox_val").attr("checked", true);
}else{
$("#checkbox_val").attr("checked", false);
}
console.log("checkbox -- " + checkbox_state.toString() + " ID VALUE --" + id_value.toString())
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
<th>Checkbox</th>
<th>ID Value</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"> </td>
<td><input type="text" id="id_value" name="id_value" value="1"/></td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"> </td>
<td><input type="text" id="id_value" name="id_value" value="2"/></td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"> </td>
<td><input type="text" id="id_value" name="id_value" value="3"/></td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"> </td>
<td><input type="text" id="id_value" name="id_value" value="4"/></td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"> </td>
<td><input type="text" id="id_value" name="id_value" value="5"/></td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"> </td>
<td><input type="text" id="id_value" name="id_value" value="6"/></td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table></br>
<button type="button" id="updateBtn_5" class="btn btn-sm btn-primary" onclick="show_value()">Show checked if id values are 1 and 5</button>
</body>
</html>其实我想要的是下图的预期结果：
希望有人能指导我如何解决这个问题。谢谢。
【问题讨论】：
-
您的
html中似乎存在语法错误。首先，将tag更正为<br><br>中没有/。其次，您有多个具有相同id属性的元素。您可以考虑通过添加数字后缀来动态重命名它们。例如，id="checkbox_val1"、id="checkbox_val2"、id="checkbox_val3" 等等。
标签： javascript html jquery arrays checkbox