使用 javascript 中的数据属性取消选中复选框

Question

我有一个 li like

的复选框

<ul id="anotherdata" class="live-search-list" style="display: block;">
<li class="list_items" data-search-term="systimehour    "><div class="row"><div class="col-xs-2 col-md-1"></div><div class="col-xs-10 col-md-11"><div class="item"><div class="item-title">SysTimeHour<span class="pull-right"><input type="checkbox" value="SysTimeHour" name="checkbox"></span></div> </div></div></div></li>
<li class="list_items" data-search-term="systimemin "><div class="row"><div class="col-xs-2 col-md-1"></div><div class="col-xs-10 col-md-11"><div class="item"><div class="item-title">SysTimeMin<span class="pull-right"><input type="checkbox" value="SysTimeMin" name="checkbox"></span></div>   </div></div></div></li>

on other hand i have a function call where i need to uncheck the selected checkbox

function tagremove(i)
        {
            $('.live-search-list li').each(function(){   

                var datavalue= $(this).data("search-term");
            //  alert(datavalue);
                if(datavalue==i)
                { $(this).attr("checked", false); }  }); 
        }

但这不起作用。

Answer 1

在当前上下文中，this 指的是 li 元素，您必须找到 input 元素并设置其 checked 属性，而不是设置此属性li 元素的属性。

这是一个例子：

$(this).find("input[type='checkbox']").removeAttr("checked");

Answer 2

您可以这样编写代码（使用您的 HTML 示例进行测试）：

function tagremove(i)
{
  // You can search through document by attribute name with
  // any value. So, you can pass you `i` value directrly inside selector
  $('.live-search-list [data-search-term="' + i + '"]').each(function() {
    // You can select child elements inside of this element and check it
    $(this).find('input').attr('checked', true);

    // If checkbox is checked and you want to uncheck
    $(this).find('input').attr('checked', false);
  });
}

使用 javascript 中的数据属性取消选中复选框

uncheck checkbox using data attributes in javascript

javascript

checkbox

custom-data-attribute