根据数组中的id值显示勾选在table中

Question

如果我必须单击 Show checked if id values are 1 and 5 按钮，根据数组中的 id 值在 table 中显示已选中时出现问题。例如，如果 id 值为 1 和 5，我想在 table 中显示已选中。

但我使用下面的示例 javascript 编码无法显示在 table 中选中的选中项，后跟 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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>

其实我想要的是下图这样的效果：

希望有人能指导我如何解决这个问题。谢谢。

Answer 1

您遇到的第一个问题是您在 DOM 中的多个元素中重复相同的 id，这是无效的。 id 属性必须是唯一的。

为了实现您的目标，您可以将 selected_values 字符串拆分成一个数组，并将其用于 filter() 现有的 id_value 元素以仅检索具有匹配值的元素。从那里您可以遍历 DOM 找到相关的复选框并将其 checked 属性设置为 true。试试这个：

$('#updateBtn_5').on('click', () => {
  var selected_values = "1,5".split(',');
  
  $('input[name="id_value"]')
    .filter((i, el) => selected_values.indexOf(el.value) != -1)
    .closest('tr').find(':checkbox').prop('checked', true);
})

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Checkbox</th>
    <th>ID Value</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0">&nbsp;</td>
    <td><input type="text" name="id_value" value="1" /></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0">&nbsp;</td>
    <td><input type="text" name="id_value" value="2" /></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0">&nbsp;</td>
    <td><input type="text" name="id_value" value="3" /></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0">&nbsp;</td>
    <td><input type="text" name="id_value" value="4" /></td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0">&nbsp;</td>
    <td><input type="text" name="id_value" value="5" /></td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0">&nbsp;</td>
    <td><input type="text" 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">Show checked if id values are 1 and 5</button>

根据数组中的id值显示勾选在table中

Display checked in the table according id value in the array

html

javascript

arrays

checkbox

jquery