0

だから私はチェックボックスとスパンを持っています

<input type="checkbox" class="checker"> <span class="something">Label</span>

スパンにはクリックに基づくいくつかの機能が既にありますが、視覚補助用の式にチェックボックスを追加しています。私がやろうとしているのは、チェックボックスがチェックされている/チェックされていないときに、すでに存在するスパンのクリック機能をトリガーしたいということです。これは私ができることです。

また、スパンで同じクリック機能を使用して、その基本機能を継続しながら、その横のチェックボックスをオン/オフにします。これは私にもできることです。

スクリプトに両方のロジックがある場合、一方が常に他方を X アウトし、一方が機能し、もう一方が機能しないように思われます。それで、私はこれをどのように調和させて機能させるかを理解しようとしていますが、当時は固定観念にとらわれずに考えるのに問題があり、そこに到達するための支援が必要なようです.

これが私が現在使用しようとしているJSです

$('.checker').live('click', function(e){e.preventDefault();$(this).siblings('.something').trigger('click');});
$('.something').live('click', function(e)
{
    e.preventDefault();
    if($(this).siblings('.checker').is(':checked'))
    {
        $(this).siblings('.checker').attr('checked', false);
    }
    else
    {
        $(this).siblings('.checker').attr('checked', true);
    }
});
4

2 に答える 2

5

Labelタグをご利用ください

<li class="contact">
    <input id='input1' type="checkbox" class="checkbox" name="checkableitems[]" value="1333">
    <label for='input1'>Baby James</label>
</li>

http://jsfiddle.net/xgB5X/5/

それでもあなたのスタイルでそれが欲しいなら、このフィドルを参照してください。

$('.something').on('click', function() {
    var chk_box = $(this).prev();
    var chk_status = !(chk_box.is(':checked'));
    chk_box.attr('checked', chk_status);
});

http://jsfiddle.net/xgB5X/10/

于 2012-07-26T18:22:06.847 に答える
0

要素を使用して開始labelすると、要素が他の特別なアクションを必要としない場合、このソリューションでは JavaScript や jQuery との対話が必要ないため、要素が必要に応じてリンクされます。

(>= v1.7) または( < v1.7)の使用を避け、live()オプトインします。on()delegate()

HTML:

<input type="checkbox" class="checker" id="check1"> <label for="check1">Label 1</label>
<input type="checkbox" class="checker" id="check2"> <label for="check2">Label 2</label>
<input type="checkbox" class="checker" id="check3"> <label for="check3">Label 3</label>
<input type="checkbox" class="checker" id="check4"> <label for="check4">Label 4</label>

jQuery:

$('.checker').each(function(){
    $(this).on('change', function(){
        $('.checker').not('#' + this.id).attr('checked', false);
    });
});

デモ: http://jsfiddle.net/EWK4M/

于 2012-07-26T18:45:01.650 に答える