0

選択されているかどうかに関係なく、親チェックボックス要素の値を特定するにはどうすればよいですか?

jQuery の Nested Menu とチェックボックスを使用して、一連のネストされた疑似 Select 要素を作成しています。ユーザーがネストされたメニューでチェックボックスを選択した場合、親メニューの関連するチェックボックスの値とともに選択を表示したい (つまり、ユーザーが を選択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>

アップデート -

ほとんど機能しています:-)親要素または子要素のいずれかがチェックされたときに適切な値を識別するための2つの非常に優れたソリューション(@Madbreaksと@Samuel Liewのおかげ)を取得しましたが、最終的にはまだ問題があります関数の一部 - アイテムがチェックされていないときにこれらの値を削除します。

@Madbreaks のソリューションは、クラスを親要素<li>と子<ul>要素(parentclass="dislike"と child 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 階層を検索して、クリックされた要素の祖先を node type で検索しますli。次に、「2番目に遠い要素を教えてください」と言い、その中に入力を配置します。コメントで述べたように、 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>前に を取得し、その中のチェックボックスを見つけて、<li>そのチェックボックスの値を取得します。

于 2013-02-27T03:51:21.673 に答える