Question

我为追加方法添加了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

我认为使用class="confirm"代替id进行多元素click.try的问题。对于else语句使用removeClass

＆＃13;

$('#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');
    }
});

＆＃13;

.responded{
border:1px solid red;
}

＆＃13;

<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">	<h2>Invitees</h2> <ul id="invitedList"></ul>	</div> </div>

＆＃13;

测试是否选中了复选框chnage li items class

1 个答案: