チェックボックスを動的に作る – jQuery

jQueryを使ってhtmlのチェックボックスを動的に増やしたり減らしたりしてみましょう。ただ単に実装するだけではなく、お手本の通りに、似た感じに作って行きます。

こういう実装を作りたくて

作った

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

実行

[urlpreviewbox url=”https://jsfiddle.net/ryosukehujisawa/hczr3v60/2/?utm_source=website&utm_medium=embed&utm_campaign=hczr3v60″/

藤沢瞭介(Ryosuke Hujisawa)
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！