๐ปradio ํธ๋ค๋ง๐ป
๊ธฐ์ด์ฝ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>๋ผ๋์ค ๋ฒํผ</h1>
<label><input type="radio" name="rb" value="white" checked>ํฐ์</label> <!--๊ธฐ๋ณธ๊ฐ์ผ๋ก ํฐ์ ์ฒดํฌ -->
<label><input type="radio" name="rb" value="black">๊ฒ์์</label>
<label><input type="radio" name="rb" value="red">๋นจ๊ฐ์</label>
<label><input type="radio" name="rb" value="yellow">๋
ธ๋์</label>
<label><input type="radio" name="rb" value="blue">ํ๋์</label>
</body>
</html>์ ํํ ๊ฐ์ value๋ฅผ ๊ฐ์ ธ์ค๊ธฐ
alert(event.target.value);event.target.value ๋ฅผ ์ด์ฉํ์ฌ ๊ฐ์ ธ์จ๋ค.
<script>
//๋ฐฐ์ด ์ํ
var rb = document.all.rb;
for (var i=0; i<rb.length; i++){
rb[i].onchange = m1;
}
function m1() {
alert(event.target.value);
}
</script>
๋ฐฐ์ด ์ํ์ ๋ผ๋์ค๋ฒํผ๋ค์ด ๋ณํ๊ฐ ์ด๋ค์ง ๋ m1 ๋ฉ์๋๊ฐ ์คํ๋๋ค.
๋ผ๋์ค ๋ฒํผ ์ ํ์ ๋ฐ๋ผ ๋ฐฐ๊ฒฝ ์ ๋ณ๊ฒฝํ๊ธฐ
<script>
//๋ฐฐ์ด ์ํ
var rb = document.all.rb;
for (var i=0; i<rb.length; i++){
rb[i].onchange = m1;
}
function m1() {
// alert(event.target.value);
document.body.bgColor = event.target.value;
}
</script>
๋ฐฐ๊ฒฝ์ด ๊ฒ์ ์ ์ผ ๋ ๊ธ์์ ๋ฐ๊ฟ์ฃผ๊ธฐ
<script>
//๋ฐฐ์ด ์ํ
var rb = document.all.rb;
for (var i=0; i<rb.length; i++){
rb[i].onchange = m1;
}
function m1() {
// alert(event.target.value);
if(event.target.value == 'black'){
document.body.text = 'white';
} else {
document.body.text = 'black';
}
document.body.bgColor = event.target.value;
}
</script>
๐ป์ ์ฒด ์ฝ๋๐ป
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>๋ผ๋์ค ๋ฒํผ</h1>
<label><input type="radio" name="rb" value="white" checked>ํฐ์</label> <!--๊ธฐ๋ณธ๊ฐ์ผ๋ก ํฐ์ ์ฒดํฌ -->
<label><input type="radio" name="rb" value="black">๊ฒ์์</label>
<label><input type="radio" name="rb" value="red">๋นจ๊ฐ์</label>
<label><input type="radio" name="rb" value="yellow">๋
ธ๋์</label>
<label><input type="radio" name="rb" value="blue">ํ๋์</label>
<script>
//๋ฐฐ์ด ์ํ
var rb = document.all.rb;
for (var i=0; i<rb.length; i++){
rb[i].onchange = m1;
}
function m1() {
// alert(event.target.value);
if(event.target.value == 'black'){
document.body.text = 'white';
} else {
document.body.text = 'black';
}
document.body.bgColor = event.target.value;
}
</script>
</body>
</html>
'WEB > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JavaScript] ์ผ์ ์๊ฐ ํ ํจ์ ์คํ : ํ์ด๋จธ(โ ) (0) | 2023.10.10 |
|---|---|
| [JavaScript] select box ํธ๋ค๋ง (0) | 2023.10.06 |
| [JavaScript] checkbox ํธ๋ค๋ง (0) | 2023.10.06 |
| [JavaScript] ํ์๊ฐ์ ์, ์ ํจ์ฑ ๊ฒ์ฌ ์ฝ๋ (0) | 2023.10.06 |
| [JavaScript] Message Box(alert, confirm, prompt) (0) | 2023.10.06 |
