測試複選框是否被選中chnage li items class

Question

我爲append方法添加了li項目，如果複選框被選中，我想更改li項目類。

這就是追加代碼

$('#submit').on('click', function(evt){ 
     evt.preventDefault(); 
     var invitee = $('#inviteName').val(); 
     console.log(invitee); $('#invitedList').append('<li>'+invitee+'<br>'+'<input type="checkbox" name="checkbox" value="confirm" id="confirm">'+"Confirmed"+'<br>'+'<button type="submit" name="edit" value="edit" id="edit">edit</button>'+'<button type="submit" name="remove" value="remove" id="remove">remove</button>'+'</li>'); 
}); 

這是改變類代碼

$('#invitedList').on('change','#confirm',function(evt){ 
    evt.preventDefault; 
    var isChecked = false; 
    if (document.getElementById('confirm').checked) { 
    $(this).parent().addClass('responded'); 
    } else { 
    $(this).parent().addClass(''); 
    } 
}); 

HTML代碼

<form id="registrar"> 
    <input type="text" name="name" placeholder="Invite Someone" id="inviteName"> 
    <button type="submit" name="submit" value="submit" id="submit">Submit</button> 
</form> 
</header> 

<div class="main"> 
    <h2>Invitees</h2> 
    <ul id="invitedList"></ul>  
</div> 
</div> 

Answer 1

我認爲有多個因素click.try的問題class="confirm"代替id 。並與removeClass else語句

$('#submit').on('click', function(evt){ 
 
    evt.preventDefault(); 
 
    var invitee = $('#inviteName').val(); 
 
    console.log(invitee); 
 
    $('#invitedList').append('<li>'+invitee+'<br>'+'<input type="checkbox" name="checkbox" value="confirm" class="confirm">'+"Confirmed"+'<br>'+'<button type="submit" name="edit" value="edit" id="edit">edit</button>'+'<button type="submit" name="remove" value="remove" id="remove">remove</button>'+'</li>'); 
 
}); 
 

 
$('#invitedList').on('change','.confirm',function(evt){ 
 
    evt.preventDefault; 
 
    if ($(this).is(":checked")) { 
 
     $(this).parent().addClass('responded'); 
 
    } else { 
 
     $(this).parent().removeClass('responded'); 
 
    } 
 
});

.responded{ 
 
border:1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="registrar"> <input type="text" name="name" placeholder="Invite Someone" id="inviteName"> <button type="submit" name="submit" value="submit" id="submit">Submit</button> </form> </header> <div class="main"> \t <h2>Invitees</h2> <ul id="invitedList"></ul> \t </div> </div>