0

チェックボックスをラジオボタンとして機能させ、同時にチェックとチェックを外すとそれぞれデータを追加および削除したいと考えています。

私が得たのは、チェックボックスが1つだけチェックされている場合は正常に機能しますが、両方をチェックすると機能しません。問題は、2 番目のボックスをチェックするときに 1 番目のチェックボックスをチェックした後、1 番目のチェックボックスがオフになっているが、1 番目の値がリストから削除されていないことです。

ここにフィドルがあります：http://jsfiddle.net/uZvMA/

JavaScript:

var $unique = $('input.unique');
$unique.click(function() {
    $unique.filter(':checked').not(this).removeAttr('checked');

});    

$("#BlackOlives-Half").change(function() {
    // If checked
    var value = $(this).val(),
        $list = $("#itemList");
    if (this.checked) {
        //add to the right
        $list.append("<li data-value='" + value + "'>" + value + "</li>");
    }
    else {
        //hide to the right
        $list.find('li[data-value="' + value + '"]').slideUp("fast", function() {
            $(this).remove();
        });
    }
});
$("#BlackOlives-Full").change(function() {
    // If checked
    var value = $(this).val(),
        $list = $("#itemList");
    if (this.checked) {
        //add to the right
        $list.append("<li data-value='" + value + "'>" + value + "</li>");
    }
    else {
        //hide to the right
        $list.find('li[data-value="' + value + '"]').slideUp("fast", function() {
            $(this).remove();
        });
    }
});

HTML:

<ul>
    <li><div id="BlackOlives-Half10">Black Olives</div>
        <div class="radioButtons">
        <input type="checkbox" id="BlackOlives-Half" onchange="" class='unique' name="BlackOlives" value="5" /> <label for="BlackOlives-Half">Half</label>
        <input type="checkbox" id="BlackOlives-Full" onclick="" class='unique' name="BlackOlives" value="10" /> <label for="BlackOlives-Full">Full</label>
        </div>

    </li>

</ul>
<ul id="itemList"></ul>
4

4 に答える 4

2

機能するソリューションができたので、このソリューションにはあまり興味がないかもしれませんが、最初のコードを少し改善することに挑戦しました。change単にすべてを呼び出して満足するのではなく、サポートしたいチェックボックスごとに約 10 行のコードを追加する必要のないコードにしたかったのです。

このフィドルには、一意性を強制し、アニメーションを保持し、再利用を可能にする jQuery の拡張機能が含まれています (ある程度 -- を使用する必要があるため、完全ではありませんul)。

http://jsfiddle.net/uZvMA/5/

少なくとも、今日は別の新しいことを見て、自分自身に教えてください:)

編集:複数のインスタンスで動作することを証明して JSFiddle を更新しました。http://jsfiddle.net/uZvMA/6/

于 2013-09-20T06:00:17.990 に答える
0

問題は、プログラムでチェック状態を設定しているが、変更イベントをトリガーする必要がある変更イベントを発生させていないことです。呼び出すことによって.trigger('change');

更新されたフィドルを見てください

于 2013-09-20T05:36:50.700 に答える