vendredi 15 octobre 2021

Apply and toggle text-decoration: line-through to a checked Checkbox

I am creating a TODOLIST app, Now i have the values on the looped li, what i want to achieve is now if i click on aech of the li, let the input checkbox be checked and at the same time toggle addition on line-through(text-decoration which i have the class as lineThrough)

This is the HTML.

$('#widget-todo').append('<li class="list-group-item mt-1 ml-0 togglist">\
                    <form action="" method="" id="#contact_us">\
                        @csrf\
                        @method('PUT')\
                        <input type="hidden" name="id" id="id" value="value.id">\
                        <input type="hidden" name="content" id="content" value="value.content">\
                        **<input type="checkbox" value="'+value.status+'" class="float-left my-auto mr-2 checkbox"\
                        style="position: relative; top:5px;" name="status" id="'+value.id+'">\**
                    </form>\
                        <input type="hidden" name="" value="value.status" id="status">\
                        <form action="" method="delete">\
                            <span class="cross togglist">'+value.content+'</span>\
                            @csrf\
                            @method('delete')\
                            <input type="hidden" name="del_id" value="'+value.id+'">\
                            <button type="submit" value="'+value.id+'" class="btn btn-sm float-right del_todo">\
                            <i class="fas fa-trash text-danger"></i></button>\
                        </form>\
                    </li>'
                );
$(document).ready(function() {
    $("ul").on("click", "li.togglist", function(){
    $(this).toggleClass("lineThrough");
    $(this).prop('checked', true);
});



Aucun commentaire:

Enregistrer un commentaire