目次
Dynamically create checkboxes - jQuery
Let's try dynamically increasing or decreasing html checkboxes using jQuery. I just make it not just to implement, but as a model, I will make it in a similar way.
I want to make such an implementation
Had made
html
<form class="class_check_form" id="id_check_form" action="/action_page.php"><br> <input type="text" id="text_val" name="firstname"> <br> </form> <button id="add_check_box">add buton</button>
jQuery
var count = 0; $("#add_check_box").click(function() { count++; var form_text_val = $('#text_val').val(); $(".class_check_form").append( ` <div class="form-check" id="form-check${count}"> <input type="checkbox" class="form-check-input"> <label class="form-check-label" for="exampleCheck1" id="${count}" >${form_text_val}</label> <p class="delate" style="color:blue; line-height:1.5; display:none;" id="buton${count}">delate</p> </div> ` ); }) $("body").on("mouseover", "label", function () { console.log(this.id); $(`#buton${this.id}`).show(); } ); $("body").on("mouseleave", "label", function () { console.log(this.id); idd = this.id setTimeout(button_all_delate, 10000); } ); $("body").on("click", "p", function () { console.log(this.id); button_id = this.id.replace("buton", ""); $(`#form-check${button_id}`).remove(); } ); function button_all_delate(){ $(`.delate`).hide(); }
Execution
[urlpreviewbox url="https://jsfiddle.net/ryosukehujisawa/hczr3v60/2/?utm_source=website&utm_medium=embed&utm_campaign=hczr3v60"/]