Jquery 单击复选框时添加和删除div

我有一张表格，上面有一系列练习，如：

<table class="table table-image" id="exercise_table">
                    <thead>
                      <tr class="bg-hercules-font">
                        <!-- Image -->
                        <th scope="col">Exercise Name</th>

                        <!-- Name -->
                        <th scope="col">Body Part</th>

                        <!-- Plan -->
                        <th scope="col">Select</th>
                      </tr>
                    </thead>
                    <tbody class="checkBox">
                      <tr>
                        <td>Bench Press</td>
                        <td>Chest</td>
                        <td>
                          <div class="form-check form-check-inline" id="checkkk">
                            <input class="form-check-input" type="checkbox" id="checktest" value="option1">
                            <label class="form-check-label" for="checktest"></label>
                          </div>
                        </td>
                      </tr>

                      <tr>
                        <td>Incline Bench Press</td>
                        <td>Chest</td>
                        <td>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="checktest" value="option1">
                            <label class="form-check-label" for="checktest"></label>
                          </div>
                        </td>
                      </tr>

                      <tr>
                        <td>Ab Roll Outs</td>
                        <td>Abs</td>
                        <td>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="checktest" value="option1">
                            <label class="form-check-label" for="checktest"></label>
                          </div>
                        </td>
                      </tr>

                      <tr>
                        <td>Cable Crunches</td>
                        <td>Abs</td>
                        <td>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="checktest" value="option1">
                            <label class="form-check-label" for="checktest"></label>
                          </div>
                        </td>
                      </tr>
                    </tbody>

                  </table>

练习名
身体部位
挑选
台式压力机
胸膛
倾斜台式压力机
胸膛
Ab推出
防抱死制动系统
电缆嘎吱作响
防抱死制动系统

复选框有一列。我的目标是，当选中此框时，我希望出现一个箭头图标，为此，我使用了一个脚本：

$('.checkBox :checkbox').change(function() {
        var $this = $(this);

        //If the box is checked
        if ($this.is(':checked')) {

          //The arrow we are going to insert
          var newInput = $('<a href="index.php" id="next_page"><span style="color:#43425D;"><i class="fas fa-arrow-right fa-lg"></i></span></a>');

          //Insert the div into the "here" class
          $('#here').append(newInput);

          //If not, we remove the arrow
        } else {
          $('#here').find('#next_page').remove();
        }
      });

$（'.checkBox:checkBox'）.change（函数（）{
var$this=$（this）；
//如果选中此框
如果（$this.is（':checked'））{
//我们要插入的箭头
var newInput=$（''）；
//将div插入“here”类
$（'#here'）。追加（newInput）；
//如果没有，我们移除箭头
}否则{
$（“#此处”）。查找（“#下一页”）。删除（）；
}
});

选中该框后，箭头图标将追加到此div中：

 <div class="d-sm-flex align-items-center justify-content-between mb-4" id="here">
   <a href="add_workout.php" id="link"><h3 class="h4 mb-0 text-gray-800">Cancel</h3></a>

 </div>

---

问题是，对于我单击的每个复选框，箭头都会再次出现。例如，如果我单击两个框，则会出现两个箭头，而不是一个。我该怎么做才能使每次单击一个框时箭头只出现一次，如果没有单击任何框，则箭头将不会出现？

因此，一个方法是每次选中/取消选中所有复选框，然后决定箭头是否应保留。我有更好的主意。。。只需记录选中了多少复选框。如果只有1个复选框（至少但为什么每次都交换），则创建箭头如果选中0个复选框，则仅删除箭头。用

html（）

代替

append（）

var检查\u计数器=0；
$（'.checkBox:checkBox'）.change（函数（）{
var$this=$（this）；
//如果选中此框
如果（$this.is（':checked'））{
选中计数器=选中计数器+1；
}否则{
checked_counter=checked_counter-1；
}
如果（已选中\u计数器==1）{
//我们要插入的箭头
var newInput=''；
//将div插入“here”类
$（'#代表我的箭头'）.html（newInput）；
//如果没有，我们移除箭头
}else if（选中的_计数器==0）{
$（“#用于我的箭头”）。查找（“#下一页”）。删除（）；
}
});

html

@simple我删除了之前的答案，因为我们在那里开始了对话，答案变得混乱。我尝试了这个，但箭头不见了，我不知道这是怎么回事。最后：你介意解释一下

html

和

append

之间的区别吗？你明白它为什么起作用吗？你必须学会阅读文档，因为作为一名程序员，你将在文档中花费大量时间：D.

html（）

将改变文档中的所有内容，

append（）

将在特定元素中的内容之后追加元素。

var checked_counter = 0;
$('.checkBox :checkbox').change(function() {
    var $this = $(this);


    //If the box is checked
    if ($this.is(':checked')) {
       checked_counter = checked_counter + 1;
    }else{
       checked_counter = checked_counter -1;
    }

     if(checked_counter == 1){

           //The arrow we are going to insert
           var newInput = '<a href="index.php" id="next_page"><span style="color:#43425D;"><i class="fas fa-arrow-right fa-lg"></i></span></a>';

          //Insert the div into the "here" class
          $('#for-my-arrow').html(newInput);

          //If not, we remove the arrow

     } else if(checked_counter == 0) {
      $('#for-my-arrow').find('#next_page').remove();
     }

     });

 <div class="d-sm-flex align-items-center justify-content-between mb-4" id="here">
       <a href="add_workout.php" id="link"><h3 class="h4 mb-0 text-gray-800">Cancel</h3></a>
       <div id="for-my-arrow"></div>      
 </div>