Jquery 标识父复选框元素的值（无论是否选中它）

如何识别父复选框元素的值，而不管它是否已被选中

我使用jQuery的带有复选框的嵌套菜单来创建一系列嵌套的伪选择元素。如果用户选择嵌套菜单中的复选框，我希望将其选择与父菜单中关联复选框的值一起显示（即，如果用户选择

name=“worth_seals”value=“Too_small”

，则显示的文本应为“seals”（父值）+“Too_small”（所选值））

下面函数的第一行标识所选元素的值，但我不知道如何创建一个类似的函数来标识未选父元素的值

JS

HTML

这里张贴了一把小提琴：

@Samuel Liew的解决方案替换了

var currentHtml=$（“.dropdown\u box span”）.html（）带有：

var currentHtml = '';
var $parent = $(this).parent().parents('li');
if($parent[0]) {
    var text2 = $parent.find("input").val();
    currentHtml = text2 + ': ' + currentHtml;
}

此处张贴了一个工作提琴：
如果您要做的是当前复选框的
前面的
中的检查，那么您可以得到如下结果：

$(".dropdown_container ul ul li a").click(function () {
    var checkboxVal = $(this).closest("ul").prev("li")
                        .find("input:checkbox").val();
});

这将获取父级
，然后获取其前面的
，然后在该
中找到复选框，然后获取该复选框的值。
在单击处理程序中，执行以下操作：

var parentVal = $(this).parents('li').eq(1).find('input').val();

这将在DOM层次结构中搜索单击元素的祖先，节点类型为
li
。然后它说“给我第二个最远的元素”，然后在其中定位输入。正如我在评论中所说，我建议。我还建议适当地缩进它，因为它有助于使这些问题的解决方案更加明显

编辑

我的建议是为元素添加一些
class
属性。这使得解决这些类型的问题几乎微不足道。例如（使用正确缩进的代码）--

现在做一些类似的事情，为包装
.goal increase
复选框的
单击处理程序

有很多方法可以做到这一点，但希望你能看到这是多么有用

干杯

“父复选框”毫无意义，因为复选框输入不能有子节点。此外，您的
腰围的
收尾标签位置错误。另外，
元素需要一个
for
属性。我建议您通过验证器运行HTML。@Madbreaks:事实上，我刚刚发现，如果标签包装所有内容，那么如果没有“for”属性，标签似乎可以正常工作，但感谢您在：-）上发现了拼写错误，它在一定程度上可以工作，但您没有正确使用它。如果这对你很重要，那么你应该做一些类似的事情：
肩膀
。标签的
for
属性引用元素的
id
。通过这样做，用户可能会单击标签来影响复选框的状态。@Madbreaks:这就是我的想法：-）但是另一个SO用户昨天告诉我“你可以在HTML中的输入周围包装一个标签。然后你可以省略for属性”。这样看来效果很好，而且确实节省了时间：-）另一方面，我想问一下您是如何将格式添加到注释中的（因为通常的SO格式选项不适用于注释）？当然可以，但正如我所说的，可能行得通，但在语法上是不正确的。如果您尝试通过验证服务运行代码，它会告诉您同样的情况。我关心这一点，但不是每个人都关心。：）不过，编写有效的代码是一个很好的习惯。我注意到你还没有接受任何答案，仍然在研究这个问题？一大块代码没有解释它在做什么，很少是一个好的答案。无意冒犯。这很好，因为它同时适用于父元素和子元素，但如果项目未选中，该函数将不再删除值。有什么建议吗？我不知道该怎么做：-（你能告诉我你的意思吗？我很想使用它，因为它很好而且简单，但有两个问题-如果选择了父元素，函数停止工作，如果未选中项，它就不再删除值。有什么建议吗？你的问题是，“无论是否选中父复选框元素，我如何识别其值？“这就是这个问题的答案。如果你觉得我乐于助人，请考虑投票我的答案。我喜欢你使用类的想法，它花了我一些时间来找出如何将它与其他代码集成。但是我仍然有一个问题，当项目未选中时，不删除值：（你介意看看这把小提琴并帮我解决最后一个问题吗？@ChayaCooper-这是一个子菜单点击的整个事件处理程序。它完全符合我的答案所描述的。如果你想要一些不同的东西，那么你必须更详细地描述你想要它做什么（你的问题在这方面不是特别清楚）。我将如何将其纳入我的其他职能？
var currentHtml = '';
var $parent = $(this).parent().parents('li');
if($parent[0]) {
    var text2 = $parent.find("input").val();
    currentHtml = text2 + ': ' + currentHtml;
}

$(".dropdown_container ul ul li a").click(function () {
    var checkboxVal = $(this).closest("ul").prev("li")
                        .find("input:checkbox").val();
});

var parentVal = $(this).parents('li').eq(1).find('input').val();

<div class="dropdown_box"><span>1st Priority</span></div>
<div class="dropdown_container">
    <ul>
        <li class="dislike">
            <a href="#"><label><input type="checkbox" name="first_dislike" value="Shoulders" />Shoulders</label></a>
            <ul class="reason">               
                <li><a href="#"><label><input class="area" type="checkbox" name="bother_shoulders" value="Too_small" class="goal-increase"/>Too Small</label></a></li>                
                <li><a href="#"><label><input type="checkbox" name="bother_shoulders" value="Too_big" class="goal-decrease"/>Too Big</label></a></li>
            </ul>  
        </li>  
        <li class="dislike">
            <a href="#"><label><input type="checkbox" name="first_dislike" value="Waist" />Waist</label></a>
            <ul class="reason">               
                <li><a href="#"><label><input type="checkbox" name="bother_waist" value="Too_defined" class="goal-increase"/>Too Defined</label></a></li>                
                <li><a href="#"><label><input type="checkbox" name="bother_waist" value="Not_defined" class="goal-decrease"/>Not Defined</label></a></li>
            </ul>  
        </li> 
    </ul>
</div>

$('ul.reason a').on('click', function(){
    // The sublist item was clicked, do something with the value:
    var reason  = $('input', this).val(),
        dislike = $(this).parents('li.dislike').find('.goal-increase').val();

    // Do something with the values...
});

$(".dropdown_container ul li a").click(function () {
    var text = $(this).find("input").val();
    var currentHtml = ''; // reset display text

    var $parent = $(this).parent().parents('li');
    // if parent list item exists
    if($parent[0]) {
        // search for the text box
        var text2 = $parent.find("input").val();
        currentHtml = text2 + ': ' + currentHtml;
    }
    $(".dropdown_box span").html(currentHtml);
    $(".dropdown_box span").append(text);
});