250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- Animation
- SWIFT
- 비전공 개발자
- iOS 개발자
- ipad
- javascript
- IOS
- hover
- front-end
- php
- button
- MAC
- 비전공자
- react
- 자바스크립트
- effect
- 애니메이션
- xcode
- 개발자
- 프론트엔드
- image
- 백엔드
- keyframes
- iPhone
- html5
- HTML
- CSS
- css3
- jQuery
- 풀스택
Archives
- Today
- Total
비전공자 개발일기
HTML Checkbox 2 본문
728x90
SMALL
<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>
728x90
LIST
'HTML _CSS' 카테고리의 다른 글
HTML & CSS -Publishing (0) | 2021.10.06 |
---|---|
CSS BULMA, TAILWIND (0) | 2021.09.17 |
HTML Checkbox (0) | 2021.09.02 |
HTML CANVAS (0) | 2021.08.31 |
HTML SVG (0) | 2021.08.30 |