Dynamically create checkboxes – jQuery
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″/]