根據復選框狀態附加或刪除 html 代碼

Question

我正在嘗試制作一個 javascript 函數，如果復選框被選中，它將把 html 代碼附加到 div 或者如果復選框未被選中，它將刪除最后一個元素。 我幾乎讓它工作了。 當我選中一個復選框 html 代碼已根據需要添加但如果我選擇另一個代碼，它會再添加我的附加代碼 2 次而不是一次。

我在這里寫下我的代碼

function myEvent(control) {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked').length+1;
  var i = 0;
  if(!control.checked) {
    $(".myInputs .inputgroup").last().remove();
    $(".myInputs .inputgroup").last().remove();
  }
  for(i = 1; i < checkboxes; i++) {
    $(".myInputs").append("<div class=\"inputgroup col-1\"><label for=\"name"+i+"\">Item Name:</label><input type=\"text\" name=\"name[]\" id=\"name"+i+"\"></div><div class=\"inputgroup col-3\"><label for=\"displayid"+i+"\">Item Displayid:</label><input type=\"text\" name=\"displayid[]\" id=\"displayid"+i+"\"></div>");
  }
}

Answer 1

您可以使用每個函數來檢查選中了多少復選框並將結果附加為選中狀態。 第二種方法用於根據復選框檢查附加/刪除結果的更改事件。
我希望下面的這個片段會對你有很大幫助。

 $(document).ready(function(){ /*After page load then check how many checbox is checked and then append results*/ $('.checktable input[type="checkbox"]:checked').each(function(i,h){ var checkboxId = $(this).attr('id'); $(".myInputs").append("<tr class=\\"remove_"+checkboxId+"\\"><td><label for=\\"name_"+checkboxId+"\\">Item Name:</label></td><td><input type=\\"text\\" name=\\"name[]\\" id=\\"name_"+checkboxId+"\\"></td></tr>"+ "<tr class=\\"remove_"+checkboxId+"\\"><td><label for=\\"displayid_"+checkboxId+"\\">Item Displayid:</label></td><td><input type=\\"text\\" name=\\"displayid[]\\" id=\\"displayid_"+checkboxId+"\\"></td></tr>"); }); /*When change then event will fire*/ $('.checktable input[type="checkbox"]').on('change', function(){ var checkboxId = $(this).attr('id'); if ($(this).is(':checked')) { $(".myInputs").append("<tr class=\\"remove_"+checkboxId+"\\"><td><label for=\\"name_"+checkboxId+"\\">Item Name:</label></td><td><input type=\\"text\\" name=\\"name[]\\" id=\\"name_"+checkboxId+"\\"></td></tr>"+ "<tr class=\\"remove_"+checkboxId+"\\"><td><label for=\\"displayid_"+checkboxId+"\\">Item Displayid:</label></td><td><input type=\\"text\\" name=\\"displayid[]\\" id=\\"displayid_"+checkboxId+"\\"></td></tr>"); }else{ $('.remove_'+checkboxId).remove(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="inputgroup col-1"> <table class="checktable" border="1"> <tr> <td><label for="headitem">Head:</label></td> <td><input type="checkbox" value="1" name="inventorytype[]" id="headitem" checked></td> <td><label for="shoulderitem">Shoulder:</label></td> <td><input type="checkbox" value="3" name="inventorytype[]" id="shoulderitem"></td> <td><label for="chestitem">Chest:</label></td> <td><input type="checkbox" value="5" name="inventorytype[]" id="chestitem"></td> <td><label for="waistitem">Waist:</label></td> <td><input type="checkbox" value="6" name="inventorytype[]" id="waistitem" checked></td> </tr> <tr> <td><label for="legsitem">Legs:</label></td> <td><input type="checkbox" value="7" name="inventorytype[]" id="legsitem"></td> <td><label for="feetitem">Feet:</label></td> <td><input type="checkbox" value="8" name="inventorytype[]" id="feetitem"></td> <td><label for="wristitem">Wrist:</label></td> <td><input type="checkbox" value="9" name="inventorytype[]" id="wristitem"></td> <td><label for="glovesitem">Gloves:</label></td> <td><input type="checkbox" value="10" name="inventorytype[]" id="glovesitem"></td> </tr> <tr> <td><label for="neckitem">Neck:</label></td> <td><input type="checkbox" value="2" name="inventorytype[]" id="neckitem"></td> <td><label for="shirtitem">Shirt:</label></td> <td><input type="checkbox" value="4" name="inventorytype[]" id="shirtitem"></td> <td><label for="fingeritem">Finger:</label></td> <td><input type="checkbox" value="11" name="inventorytype[]" id="fingeritem"></td> <td><label for="trinketitem">Trinket</label></td> <td><input type="checkbox" value="12" name="inventorytype[]" id="trinketitem"></td> </tr> <tr> <td><label for="shielditem">Shield:</label></td> <td><input type="checkbox" value="14" name="inventorytype[]" id="shielditem"></td> <td><label for="cloakitem">Cloak:</label></td> <td><input type="checkbox" value="16" name="inventorytype[]" id="cloakitem"></td> <td><label for="tabarditem">Tabard:</label></td> <td><input type="checkbox" value="19" name="inventorytype[]" id="tabarditem"></td> <td><label for="relicitem">Relic</label></td> <td><input type="checkbox" value="28" name="inventorytype[]" id="relicitem"></td> </tr> </table> </div> <br> <div class="col-1"> <table class="myInputs" border="0"> </table> </div>

Answer 2

所以......當一個復選框被選中時你運行 myEvent 嗎？ 第一次，選中一個復選框，for 循環運行一次。 第二次，第二個復選框被選中，for 循環運行兩次。

函數 myEvent 接收對復選框（“控件”）的引用，因此無需在函數中搜索它。 您可以使用if control.checked == true來測試是否應該添加新的 html 或將其刪除。 嗯，似乎您已經這樣做了以測試是否刪除 html ......只需為“添加”代碼創建一個“else”並刪除“for”。

Answer 3

我看到您非常接近結果，您只需要在 for 循環之前添加以下行：

$(".myInputs").html('');
for(i = 1; i < checkboxes; i++) {

當您遍歷所有選中的復選框並將 HTML 附加到結果時，因此在此之前您需要將結果 div 設為空白。 這是更新的小提琴：

https://codepen.io/prashant-shukla-the-vuer/pen/GRgdvrR