代码之家 › 专栏 › 技术社区 › XAZG ÐÐµÐ¸Ð·Ð²ÐµÑÑÐ½ÑÐ¹

如何在for js之后重置字符串变量

checkboxlist checkbox input javascript

XAZG ÐÐµÐ¸Ð·Ð²ÐµÑÑÐ½ÑÐ¹ · 技术社区 · 2 年前

如何重置字符串变量对于,我想通过innerHTML插入按下复选框中的选定值,方法是按下中的按钮。但我不知道如何最好地重置变量,但它不会复制过去的值+现在的值。

<div class="container">
   <div class="el"></div>  
       <label for="checkbox1">carWashing</label>
       <input type="checkbox" value="carWashing" id="checkbox1" name="checkbox1">
   </div>  
   <div class="el"></div>  
       <label for="checkbox2">suspensionDiagnostics</label>
       <input type="checkbox"  value="suspensionDiagnostics id="checkbox2" name="checkbox2">
    </div>  
    <div class="el"></div>  
       <label for="checkbox3">replacingFilters</label>
      <input type="checkbox" id="checkbox3" value="replacingFilters" name="checkbox3">
    </div>  
</div>
<button class="btn" id="btn"></button>

<div class="l">
    <ul class="ul" id="ul">

    </ul>
</div>

<script>
let ul = document.getElementById("ul")
let check1 = document.getElementById("checkbox1")
let check2 = document.getElementById("checkbox2")
let check3 = document.getElementById("checkbox3")
let sumLi=''
let checkboxesAll = new Array(check1,check2,check3)
//let checkboxesAll = new Array (document.getElementsByName('checkbox'));
console.log(checkboxesAll)

function start() {
  for (let index = 0; index < checkboxesAll.length; index++) {
     if (checkboxesAll[index].checked) {
         sumLi+='<li>'+ checkboxesAll[index].value + '</li>'
     } else {
         console.log('Ð½Ðµ Ð½Ð°Ð¶Ð°Ñ')
     }
  }
  console.log(sumLi)
  const arr=sumLi.split("</li>")
  console.log(sumLi)

   ul.innerHTML+=sumLi
 }

document.getElementById('btn').onclick = start;

1 回复 | 直到 2 年前

keni homes 2 年前

我不知道这是不是你需要的

但是你不能通过这样做在最后清空你的变量 sumLi = "" 这或者不能在for循环中声明变量,因此每次刷新时

选项1

<div class="container">
   <div class="el"></div>  
       <label for="checkbox1">carWashing</label>
       <input type="checkbox" value="carWashing" id="checkbox1" name="checkbox1">
   </div>  
   <div class="el"></div>  
       <label for="checkbox2">suspensionDiagnostics</label>
       <input type="checkbox"  value="suspensionDiagnostics id="checkbox2" name="checkbox2">
    </div>  
    <div class="el"></div>  
       <label for="checkbox3">replacingFilters</label>
      <input type="checkbox" id="checkbox3" value="replacingFilters" name="checkbox3">
    </div>  
</div>
<button class="btn" id="btn"></button>

<div class="l">
    <ul class="ul" id="ul">

    </ul>
</div>

<script>
let ul = document.getElementById("ul")
let check1 = document.getElementById("checkbox1")
let check2 = document.getElementById("checkbox2")
let check3 = document.getElementById("checkbox3")
let sumLi=''
let checkboxesAll = new Array(check1,check2,check3)
//let checkboxesAll = new Array (document.getElementsByName('checkbox'));
console.log(checkboxesAll)

function start() {
  for (let index = 0; index < checkboxesAll.length; index++) {
     if (checkboxesAll[index].checked) {
         sumLi+='<li>'+ checkboxesAll[index].value + '</li>'
     } else {
         console.log('Ð½Ðµ Ð½Ð°Ð¶Ð°Ñ')
     }
  }
  console.log(sumLi)
  const arr=sumLi.split("</li>")
  console.log(sumLi)

   ul.innerHTML+=sumLi
   
   // by empty variable every time
   sumLi=""
 }

document.getElementById('btn').onclick = start;

选项2通过声明内部循环

<div class="container">
   <div class="el"></div>  
       <label for="checkbox1">carWashing</label>
       <input type="checkbox" value="carWashing" id="checkbox1" name="checkbox1">
   </div>  
   <div class="el"></div>  
       <label for="checkbox2">suspensionDiagnostics</label>
       <input type="checkbox"  value="suspensionDiagnostics id="checkbox2" name="checkbox2">
    </div>  
    <div class="el"></div>  
       <label for="checkbox3">replacingFilters</label>
      <input type="checkbox" id="checkbox3" value="replacingFilters" name="checkbox3">
    </div>  
</div>
<button class="btn" id="btn"></button>

<div class="l">
    <ul class="ul" id="ul">

    </ul>
</div>

<script>
let ul = document.getElementById("ul")
let check1 = document.getElementById("checkbox1")
let check2 = document.getElementById("checkbox2")
let check3 = document.getElementById("checkbox3")

let checkboxesAll = new Array(check1,check2,check3)
//let checkboxesAll = new Array (document.getElementsByName('checkbox'));
console.log(checkboxesAll)

function start() {
  for (let index = 0; index < checkboxesAll.length; index++) {
  let sumLi='';
     if (checkboxesAll[index].checked) {
         sumLi+='<li>'+ checkboxesAll[index].value + '</li>'
     } else {
         console.log('Ð½Ðµ Ð½Ð°Ð¶Ð°Ñ')
     }
  }
  console.log(sumLi)
  const arr=sumLi.split("</li>")
  console.log(sumLi)

   ul.innerHTML+=sumLi
 }

document.getElementById('btn').onclick = start;

祝您今天过得愉快。。。。。。。。。。。。