时间戳

首页 > 解决方案 > 根据数组中的id值在表格中显示勾选

javascript - 根据数组中的id值在表格中显示勾选

问题描述

如果我必须单击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">&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>

实际上，我想要如下图所示的预期结果：

输出1

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

标签： javascripthtmljqueryarrayscheckbox

解决方案

您遇到的第一个问题是您id在 DOM 中的多个元素中重复相同的内容，这是无效的。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>

推荐阅读