HTML Checkbox 2

 

※ input 상자에 입력한 값이 자동으로 check되는 것(단, 입력시 ,뒤에 띄어쓰기하면 안됨 그리고. 버튼 클릭으로만 사용)

 

      <form name="colorCheckForm">
        <p>
          <label>
            검정: <input type="checkbox" value="검정" name="colorCheck">
          </label>
          <label>
            빨강: <input type="checkbox" value="빨강" name="colorCheck">
          </label>
          <label>
            초록: <input type="checkbox" value="초록" name="colorCheck">
          </label>
          <label>
            파랑: <input type="checkbox" value="파랑" name="colorCheck">
          </label>
          <label>
            하양: <input type="checkbox" value="하양" name="colorCheck">
          </label>
          <label>
            레몬: <input type="checkbox" value="레몬" name="colorCheck">
          </label>
          <label>
            오렌지: <input type="checkbox" value="오렌지" name="colorCheck">
          </label>
        </p>
        <p>
          <input type="text" name="textColors" placeholder="레몬,하양" value="레몬,하양">
          <input type="button" name="" value="입력" onclick="test(this)">
          <input type="reset">
        </p>
        </form>

        <script>
          const colorChecks = document.forms.colorCheckForm.colorCheck;
          const colorChecks2 = document.querySelectorAll('[name="colorCheck"]');
          const input = document.querySelector('[type="text"]').value;
          console.log(input)
          // console.log(colorChecks)
          // console.log(colorChecks2)
          for(let colorCheck of colorChecks) {
            console.log(colorCheck.value)
          }
          const test = function(checkButton) {
            let textColors = checkButton.form.textColors.value
            let colorList = textColors.split(",")
            // console.log(colorList)
            for(let i in colorList) {
              // console.log(`${i} : ${colorList[i]}`)
              for(let colorCheck of colorChecks) {
                // console.log(`colorCheck.value : ${colorCheck.value} / colorList[${i}] : ${colorList[i]}`)
                if(colorCheck.value === colorList[i]) colorCheck.checked = true;
              }
            }
          }
        </script>