javascript - 选择深度嵌套的复选框需要使用 jQuery 选择父复选框
问题描述
我正在尝试选择一个深度嵌套的子复选框,这样做时,我的 jQuery 代码还将在 DOM 中选择其上方的父复选框。然后,我想通过使用深度嵌套的子复选框的 ID 来存储父复选框的 ID。
我的示例代码无法正常工作。
示例:JSFiddle。
代码:
<form action="" method="POST" id="RoleForm">
<div class="form-group">
<label>Role Name</label><input id="rolename" required="" class="form-control" name="rolename" placeholder="Add Role Name" type="text">
</div>
<div class="form-group">
<label>Role Description</label>
<textarea id="roledesc" required="" class="form-control" name="roledesc" placeholder="Add Role Description"></textarea>
</div>
<div class="form-group">
<ul>
<li style="display: block; width: 100%;float: left;">
<input name="page" value="page-1" type="checkbox">Cockpit <br>
<ul>
<li style="display: block;width: 20%;float:left;">
<input name="action" value="action-1" type="checkbox">Update Deposit Amount <br>
</li>
<li style="display: block;width: 20%;float:left;">
<input name="action" value="action-2" type="checkbox">Pay To Captain <br>
</li>
<li style="display: block;width: 20%;float:left;">
<input name="action" value="action-3" type="checkbox">My Action <br>
</li>
</ul>
</li>
<li style="display: block; width: 100%;float: left;">
<input name="page" value="page-2" type="checkbox">Dashboard <br>
<ul>
<li style="display: block;width: 20%;float:left;">
<input name="action" value="action-2" type="checkbox">Update Deposit Amount <br>
</li>
<li style="display: block;width: 20%;float:left;">
<input name="action" value="action-1" type="checkbox">Pay To Captain <br>
</li>
</ul>
</li>
<li style="display: block; width: 100%;float: left;">
<input name="page" value="page-5" type="checkbox">TestPage <br>
<ul>
<li style="display: block;width: 20%;float:left;">
<input name="action" value="action-2" type="checkbox">Pay To Captain <br>
</li>
</ul>
</li>
</ul>
</div>
</form>
jQuery:
var pageArray = [];
var actionArray = [];
$('input[name="page"]:checked').each(function() {
pageArray.push($(this).val());
$('input[name="action"]:checked').each(function() {
actionArray.push($(this).val());
});
});
alert(actionArray);
解决方案
推荐阅读
- javascript - 只有在下午 1 点到 2 点之间才可以在网站背景上播放音频
- php - WP ACF Generate php – 在哪里以及如何放置代码?
- php - 天数计算未给出正确的天数
- scala - 如何使用 Spark 从 DBFS 目录加载和处理多个 csv 文件
- pdf - PDF 文档对象编码
- php - 我正在使用散列密码和会话制作一个简单的登录系统。登录页面无法识别来自不同注册页面的哈希
- clojure - 将 clojurescript 的 re-graph graphql 客户端连接到 lacinia-pedestal graphql 服务器
- c# - C# WPF SQLite 索引超出范围异常
- spring-boot - 使用 JPA 管理继承类的最佳方法是什么?
- c# - 从“System.Net.Http.HttpClientHandler”上的“CheckCertificateRevocationList”获取值时出错