javascript - 使用 D3 检查时获取复选框的 ID
问题描述
我有以下格式的引导表
<div class="col-sm-8">
<div class="tablecontainer">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Instances</th>
<th scope="col">Chains</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='checkbox' id='[0]' class='jmolInline'>1</td>
<td>4LF8|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[1]' class='jmolInline'>2</td>
<td>4LF7|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[2]' class='jmolInline'>1</td>
<td>4B3W|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[3]' class='jmolInline'>2</td>
<td>4AA4|1|A</td>
</tr>
</tbody>
</table>
</div>
我想获取复选框的 ID,因为它们正在使用 d3 进行检查。我尝试了以下方法,但似乎不起作用。使用 d3 将检查的 id 存储在数组中的最佳方法是什么?
var checked = []
var boxes = d3.selectAll("input.jmolInline:checked");
boxes.each(function() {
checked.push(this.id)
});
console.log(checked)
解决方案
使用此代码完成工作
var inputs = d3.selectAll('input[type="checkbox"]')._groups[0];
document.getElementById('submit').addEventListener('click', function() {
var checked = [];
for (i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked.push(inputs[i].id);
}
}
document.getElementById('result').innerHTML = 'Array of ids selected ' + checked;
console.log(checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="col-sm-8">
<div class="tablecontainer">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Instances</th>
<th scope="col">Chains</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='checkbox' id='[0]' class='jmolInline'>1</td>
<td>4LF8|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[1]' class='jmolInline'>2</td>
<td>4LF7|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[2]' class='jmolInline'>1</td>
<td>4B3W|1|A</td>
</tr>
<tr>
<td><input type='checkbox' id='[3]' class='jmolInline'>2</td>
<td>4AA4|1|A</td>
</tr>
</tbody>
</table>
<button id="submit">get Id</button>
<div id="result"></div>
</div>
推荐阅读
- laravel - Laravel 5.7 使用空关系连接查询
- matlab - 如何使用 powershell 处理 Matlab 生成的 .dat 文件
- c# - 如何获取当前使用的网络适配器
- asp.net - 当我在 WCF 服务中运行简单方法时,“/”应用程序中的服务器错误
- vue.js - 没有 Webpack 的 Vuejs 的简约构建设置
- javascript - CSS/JS:使用 vanilla JS 向下和向上滑动过渡
- php - 覆盖 woocommerce 主题没有效果
- sql - 表中的日期列
- git - 我是否必须将 gh-pages 合并到 master 才能发布带有 dist 文件夹的存储库?
- database - NoSQL (DynamoDB) 数据库设计