0

无论是否已选中，如何识别父复选框元素的值？

我正在使用带有复选框的 jQuery 嵌套菜单来创建一系列嵌套的伪选择元素。如果用户在嵌套菜单中选择了一个复选框，我想在父菜单中显示他们的选择以及相关复选框的值（即，如果用户选择name="bother_shoulders" value="Too_small"，则显示的文本应该是 'Shoulders' （父值） +' 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/

4

3 回答 3

1

在您的点击处理程序中，执行以下操作：

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

这会在 DOM 层次结构中搜索被点击元素的祖先，节点类型为li。然后它说“给我第二个最远的元素”，然后在其中找到输入。正如我在评论中所说，我建议验证您的 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复选框的点击处理程序。

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

干杯

于 2013-02-27T03:51:31.480 回答
1 
$(".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/

于 2013-02-27T03:54:21.187 回答
0

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

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

这将获取 parent <ul>，然后获取它<li>之前的，然后在 that 中找到复选框<li>，然后获取该复选框的值。

于 2013-02-27T03:51:21.673 回答