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元素更改为label，并具有与关联复选框匹配的适当for属性，则单击文本与选中该框相同。然后，您只需要观看复选框事件。

<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 回答