uncheck checkbox using data attributes in javascript

Question

I have a checkbox in 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); }  }); 
        }

But that is not working.

Possible duplicate of [Setting "checked" for a checkbox with jQuery?](http://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery) — Caspar Kleijne, Jul 06 '16 at 12:42

Titus · Accepted Answer · 2016-07-06T12:49:47.307

0

In the current context this refers to the li element, you'll have to find the input element and set its checked attribute instead of setting this attribute to the li element.

Here is an example:

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

edited Jul 06 '16 at 12:49

answered Jul 06 '16 at 12:41

Titus

22,031
1
23
33

checked attribute is not there, the check box is simply check without any attribute. so in that case what to do to uncheck that – Sumit Aggarwal Jul 06 '16 at 12:47
@SumitAggarwal There are some extra spaces in the `data-search-term` value, maybe that is the problem. Try `var datavalue= $(this).data("search-term").trim()` – Titus Jul 06 '16 at 12:56
@SumitAggarwal try ...prop('checked', false) in place of removeAttr – Rocker1985 Jul 06 '16 at 12:56

score 0 · Answer 2 · answered Jul 06 '16 at 12:55

You can write your code like this (tested with your HTML sample):

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);
  });
}

uncheck checkbox using data attributes in javascript

2 Answers2