使用 jquery 选中或取消选中 parent parents 复选框
Posted
技术标签:
【中文标题】使用 jquery 选中或取消选中 parent parents 复选框【英文标题】:Check or uncheck the parent parents check box using jquery 【发布时间】:2017-06-25 21:07:27 【问题描述】:当我选中 Account Settings 复选框时,所有子 li 输入标签都被完美选中。但是当我取消选中 Children li 复选框 Add 和 Delete 时,它也会取消选中 Account Settings。
我不想在选中 AS 1 和 AS 2 时取消选中 帐户设置。
帮帮我,如何解决这个问题。
这里Jsfiidle
下面是我的代码。
HTML
<ul class="tree" id="tree">
<li>
<input type="checkbox" name="account_settings" value="yes">Account Settings
<!-- AND SHOULD CHECK HERE -->
<ul>
<li>
<input type="checkbox" name="one" value="one">AS One</li>
<li>
<input type="checkbox" name="two" value="two">AS Two</li>
<li>
<input type="checkbox" name="user_roles" value="user_roles">Users & Roles
<!-- SHOULD CHECK HERE -->
<ul>
<li>
<input type="checkbox" name="user_role" value="add">Add</li>
<li>
<input type="checkbox" name="user_role" value="delete">Delete</li>
<!-- CHECK HERE -->
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="rl_module" value="yes">RL Module</li>
<li>
<input type="checkbox" name="rl_module" value="yes">Accounting
<ul>
<li>
<input type="checkbox" name="vat" value="yes">VAT</li>
<li>
<input type="checkbox" name="bank_account" value="yes">Banking
<ul>
<li>
<input type="checkbox" name="view" value="yes">View</li>
<li>
<input type="checkbox" name="crud" value="yes">CRUD</li>
</ul>
</li>
</ul>
</li>
</ul>
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
$('input[type=checkbox]').click(function ()
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('ul').children('li').each(function ()
if($('input[type=checkbox]', this).is(':checked')) sibs=true;
)
$(this).parents('ul').prev().prop('checked', sibs);
);
【问题讨论】:
您只使用了 html 标签。请使用它的 id 或名称来区分复选框.. 是的,它应该在我身边动态。所以我使用了标签 我已经更新了我的答案。请看那个。 这很好:) 【参考方案1】:试试这个
<ul class="tree" id="tree">
<li>
<input type="checkbox" name="account_settings" value="yes">Account Settings
<ul>
<li>
<input class="account_settings" type="checkbox" name="one" value="one">AS One
</li>
<li>
<input class="account_settings" type="checkbox" name="two" value="two">AS Two
</li>
<li>
<input class="account_settings" type="checkbox" name="user_roles" value="user_roles">Users & Roles
<ul>
<li>
<input class="account_settings user_roles" type="checkbox" name="user_role" value="add">Add
</li>
<li>
<input class="account_settings user_roles" type="checkbox" name="user_role" value="delete">Delete
</li>
</ul>
</li>
</ul>
</li>
</ul>
$('input[type=checkbox]').click(function ()
if($(this).prop('checked'))
$('.'+$(this).attr('name')).prop('checked',true);
else
$('.'+$(this).attr('name')).prop('checked',false);
findparent(this);
);
);
function findparent(elem)
var flag = 1;
var fcount = 0;
var count = 0;
$(elem).parent().parent().find('li input').each( function ( index )
fcount = fcount +1;
if($(this).prop('checked') == false)
count = count + 1;
);
if(count == fcount)
flag = 0;
if(flag == 0)
$(elem).parent().parent().prev().prop('checked',false);
else
$(elem).parent().parent().prev().prop('checked',true);
【讨论】:
一切正常。当我取消选中添加和删除用户和角色时仍然显示选中。如何取消选中父用户和角色 请再次检查代码。我已经更新了它。添加了另一个功能来检查父复选框和兄弟复选框。 完美。但就我而言,它应该重复嵌套复选框的次数。一旦检查此网址jsfiddle.net/siddhuphp/e32zcp5k/2 检查了您的网址。我的意思是,将当前复选框的名称属性的值作为子复选框的类名。这适用于所有复选框。 对不起,我没听懂你。你能用 jsfiddle 给我看吗?以上是关于使用 jquery 选中或取消选中 parent parents 复选框的主要内容,如果未能解决你的问题,请参考以下文章
复选框 - 使用 jQuery 和 MySQL 选中或取消选中
复选框值不能基于选中或使用jquery取消选中来更改[重复]
javascript [jQuery单选框选中与取消选中应用]记录jQuery使用过程中单选框选中与取消选中的坑。 #JS #jQuery #input #radio