0

それぞれの横にチェックボックスがあるテキスト項目の順序付けられていないリストがあります。チェックボックスがチェックされている/チェックされていないときと、テキストがクリックされたときの両方で同じ機能を実行したい。

これが私が今持っているものです：

HTML

<li><input type="checkbox" class="cbox" name="adwords_list[]" value="shave club" ><p class="term"> shave club</p></li>

JS

$(function() {
    $('ol.phrases li .term').click(function() {
        $cboxStatus = $(this).parent().find('.cbox').prop('checked');

        if ($cboxStatus) {
            $(this).parent().find('.cbox').prop('checked', false);
        } else {
            $(this).parent().find('.cbox').prop('checked', true);
        }
    });
});

$(':checkbox, .term').on('change', function() {
    console.log($(this).prop('checked'));
});

on.change用語をクリックしても関数が呼び出されません。どの要素がクリック/変更されても、チェックされた状態を正確に表現するにはどうすればよいですか?

4

1 に答える 1

1

関連するチェックボックスに一致する適切な属性を使用して、p.term要素をに変更すると、テキストをクリックすることはボックスをチェックすることとまったく同じになります。その後、チェックボックス イベントのみを監視する必要があります。labelfor

<input type="checkbox" class="cbox" name="adwords_list[]" value="shave club" id="cb1" />  
<label class="term" for="cb1"> shave club</label>

あなたは付け加えられます

.term {
  display: block;
}

pタグのスタイルを一致させる必要がある場合は、CSS に追加します。

于 2013-05-09T20:41:05.560 に答える