Conditional checkbox checked jquery

Question

I'm trying to add a value of checked for specific elements.

function renderList() {
 $.getJSON("/search", function(response) {
  $.each(response, function(index, value) {
    $('ul').append($('<li>')
     .append(value.task)
     .append('<input type="checkbox"/>')
     .append('<span>x</span>'))
    })  
  });
}

I would like to add a conditional statement for the checkbox value of "checked"

When I add .attr('checked', true), it is added to the li and not the checkbox.

Under what condition would the checkbox be checked, or unchecked? — David Thomas
– David Thomas, Commented Mar 16, 2014 at 20:34

Alvaro Flaño Larrondo · Accepted Answer · 2016-03-04 16:15:46Z

1

You can do something like this:

function renderList() {
 $.getJSON("/search", function(response) {
    $.each(response, function(index, value) {

    var checkedString = '';
    if( value == 'something'){
       checkedString = 'checked="checked"';
    }
    $('ul').append($('<li>')
    .append(value.task)
    .append('<input type="checkbox" ' + checkedString + '/>')
    .append('<span>x</span>'))
    })
 });

edited Mar 4, 2016 at 16:15

Alvaro Flaño Larrondo

5,7402 gold badges31 silver badges50 bronze badges

answered Mar 16, 2014 at 20:29

Raimond Kuipers

1,1461 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mauro Cifuentes · Accepted Answer · 2014-03-16 20:36:09Z

0

you can try

$.each(response, function(index, value) {
    var valueChecked = (value.checked)? ' checked ': '';
    $('ul').append($('<li>' + value.task +  
        '<input type="checkbox" '+ valueChecked +' />' +
        '</li>')

valueChecked get ' checked ' value if value.checked (the property choosed by you) is true;

there's no need to write .append('li') .... .append('

Hope this help you!

answered Mar 16, 2014 at 20:36

Mauro Cifuentes

765 bronze badges

Collectives™ on Stack Overflow

Conditional checkbox checked jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related