1

jQueryを使用して簡単なドロップダウンメニューを作成しており、各項目にはチェックボックスがあります。li要素をクリックすると、チェックボックスが選択されます。ただし、チェックボックス自体をクリックすると、効果的に2回チェックされるため、選択されません。どうすればこれを止めることができますか?

jsFiddle: http://jsfiddle.net/ZEp7V/

HTML:

<div id="dropdown">Channels</div>
<ul class="droplist">
    <li>News <input type="checkbox" /></li>
    <li>Sport <input type="checkbox" /></li>
    <li>Science <input type="checkbox" /></li>
    <li>Health <input type="checkbox" /></li>
    <li>All</li>
</ul>

CSS:

div#dropdown {
    border: 1px solid #000;
    width: 150px;
    height: 20px;
    line-height: 20px;
    padding: 10px;
    cursor: pointer;
}

ul.droplist {
    display: none;
    width: 170px;
    border: 1px solid #000;
    border-bottom: none;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    position: absolute;
    background-color: #fff;
}

ul.droplist li {
    border-bottom: 1px solid #000;
    padding: 10px;
    cursor: pointer;
}

ul.droplist li input {
    float: right;
}

JS:

$(document).ready(function(){

    $("#dropdown").click(function() {
        $(this).next().slideToggle(200);
    });

    $(".droplist li").click(function(e) {
        // Toggle the checkbox
        var input = $(this).children("input");
        $(input).prop("checked", !$(input).prop("checked"));
    });

    $(".droplist li:last").click(function () {
        // Select all boxes
        var check = $('.droplist li input:not(:checked)').length;
        $(".droplist li input").prop("checked", check);
    });

});
4

2 に答える 2

7

チェックボックスでイベントの伝播を停止できます。

$(".droplist li :checkbox").click(function (e) {
    e.stopPropagation();
});

これにより、イベントがDOMツリーを親要素にバブルアップするのを防ぎliます（あなたが言うように、それにバインドされたイベントハンドラーをトリガーします）。

補足として、コードを変更してイベント デリゲーションを利用することもできます。これは、li要素ごとに 1 つではなく 1 つのイベント ハンドラーしかないため、より効率的です。例えば：

$(".droplist").on("click", "li", function (e) {
    // Toggle the checkbox
    var input = $(this).children("input");
    $(input).prop("checked", !$(input).prop("checked"));
});

詳細については、.on()メソッドを参照してください。

于 2012-07-04T08:04:12.000 に答える
1

チェックボックスをラベルで囲みます (ラベルはブラウザのネイティブ クリック イベントを入力と共有します)

<li><label for="news_input">News <input type="checkbox" id="news_input" /></label></li>
<li><label for="sport_input">Sport <input type="checkbox" id="sport_input" /></li>
<li><label for="science_input">Science <input type="checkbox" id="science_input" /></li>
<li><label for="health_input">Health <input type="checkbox" id="health_input" /></li>

そして、この振る舞いを取り除きます

$(".droplist li").click(function(e) {
   // Toggle the checkbox
  var input = $(this).children("input");
  $(input).prop("checked", !$(input).prop("checked"));
});

このように、あなたは大丈夫なはずです。あなたのソリューションの問題は、ユーザーがクリックで入力をヒットするとすぐに、ネイティブブラウザのチェックボックス機能と jQuery が互いに殺し合うことです。（ブラウザはチェックボックスをチェックし、jQueryはチェックを外します）

于 2012-07-04T08:09:16.543 に答える