Question

如何识别父复选框元素的值，无论它是否被选中，我该如何识别？

我正在使用带有复选框的jQuery嵌套菜单来创建一系列嵌套的伪选择元素。如果用户在嵌套菜单中选中一个复选框，我想在父菜单中显示他们的选择以及相关复选框的值（即，如果用户选择 name="bother_shoulders" value="Too_small" ，则显示的文本应为'肩膀'（父值） +'Too_small'（所选值））。

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

JS

$(".dropdown_container ul li a").click(function () {
    var text = $(this).find("input").val();
    var currentHtml = $(".dropdown_box span").html();
    $(".dropdown_box span").html(currentHtml.replace(currentHtml, ''));
    $(".dropdown_box span").append(text);
});

HTML

<div class="dropdown_box"><span>1st Priority</span></div>
<div class="dropdown_container">
<ul>
    <li><a href="#"><label><input type="checkbox" name="first_dislike" value="Shoulders" />Shoulders</label></a>
    <ul>               
        <li><a href="#"><label><input 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><a href="#"><label><input type="checkbox" name="first_dislike" value="Waist" />Waist</label></a>
    <ul>               
        <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> 
    <!-- More List Items with Nested Menu Items --!>
</ul>
</div>

更新 -

它几乎正常工作:-)我已经获得了两个非常好的解决方案（感谢@Madbreaks和@Samuel Liew），用于在检查父元素或子元素时识别正确的值，但是我仍然遇到函数最后一部分的问题 - 在取消选中某个项时删除这些值。

@Madbreaks'解决方案向父<li>和子<ul>元素（父class="dislike"和子class="reason"）添加了类

$(".dropdown_container ul li.dislike a").click(function () {
    var dislike = $(this).find("input").val();
    var dislike_formatted = dislike.replace(/_/g, " ");
    var currentHtml = $(".dropdown_box span").html();
    $(".dropdown_box span").html(currentHtml.replace(currentHtml, ''));
    $(".dropdown_box span").append(dislike_formatted);
});
$("ul.reason a").click(function () {
    var reason = $(this).find("input").val();
    var dislike = $(this).parents('li.dislike').find("input").val();
    var reason_formatted = reason.replace(/_/g, " ");
    var dislike_formatted = dislike.replace(/_/g, " ");
    var currentHtml = $(".dropdown_box span").html();
    $(".dropdown_box span").html(currentHtml.replace(currentHtml, ''));
    $(".dropdown_box span").append(dislike_formatted + ': ' + reason_formatted);
});

这里发布了一个工作小提琴：jsfiddle.net/chayacooper/Ejqp9

@Samuel Liew的解决方案将var currentHtml = $(".dropdown_box span").html();替换为：

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

这里发布了一个工作小提琴：jsfiddle.net/samliew/H3n6m/11/

Answer 1

在点击处理程序中，执行：

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

这将在DOM层次结构中搜索所单击元素的祖先，节点类型为li。然后它说＆＃34;给我第二个最远的元素＆＃34;，然后在其中找到输入。正如我在评论中所说，我建议validating your HTML。我还建议缩进它，因为它可以帮助解决这些问题更加明显。

修改

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

<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>

请注意class="dislike"和class="reason"属性。现在，您可以更轻松地定位单击处理程序并引用其他节点。我上面的第一个例子：

$('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... });

现在做类似的事情，<a>的点击处理程序包含.goal-increase复选框。

有很多方法可以解决这个问题，但希望你能看到这是有用的。

干杯

Answer 2

$(".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);
});

http://jsfiddle.net/samliew/H3n6m/11/

Answer 3

如果你所追求的是当前复选框的<li>之前<ul>中的检查，那么你可以这样做：

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

这会获得父<ul>，然后获取<li>，然后找到<li>中的复选框，然后获取该复选框的值。

识别父复选框元素的值（无论是否已选中）

3 个答案: