javascript - 更改输入框也需要在JS中查找是否选中复选框

Question

我在表 <td> 中有输入框和复选框如下所示，

<td>
    <input class="Comment" type="text" data-db="comment" data-id="{{uid}}"/>
    <input type="checkbox" id="summary" title="Check to set as Summary" />
</td>

基于check box，只有输入框的内容才会存入DB。

在JS文件中，我试过了

var updateComment = function( eventData )
{
    var target = eventData.target;
    var dbColumn = $(target).attr('data-db');
    var api = $('#api').val();
    var newValue = $(target).val();
    var rowID = $(target).attr('data-id');
    var summary = $('#summary').is(':checked');
    params = { "function":"updatecomments", "id": rowID, "summary": summary };
    params[dbColumn] = newValue;
    jQuery.post( api, params);
};

$('.Comment').change(updateComment);

但是 var summary总是回来 false .

我试了很多方法prop('checked') , (#summary:checked).val()所有都只返回 false。

如何解决这个问题？

Answer 1

看起来您的表格中有多行复选框+输入字段。所以执行 $('#summary').is(':checked') 将返回第一个匹配元素的值，因为 DOM 中的 id 应该是唯一的。

所以，像这样修改你的代码:

<td>
    <input class="Comment" type="text" data-db="comment" data-id="{{uid}}"/>
    <input type="checkbox" class="summary" title="Check to set as Summary" />
</td>

并且，代替 $('#summary').is(':checked'); 你可以这样写:

var summary = $(target).parent().find(".summary").is(':checked');

通过这样做，我们确保我们只检查选中输入字段的复选框的值。

更新:用于监听两种情况，即当先选中复选框然后输入输入框和首先输入输入框然后选中时强>:

注册复选框的更改事件:

// Whenever user changes any checkbox
$(".summary").change(function() {
    // Trigger the "change" event in sibling input element
    $(this).parent().find(".Comment").trigger("change");
});