๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Programming/HTML

[HTML] input radio ๋ฒ„ํŠผ checked ์•ˆ๋จ.

728x90
๋ฐ˜์‘ํ˜•

HTML radio button์˜ checked ๋ฌธ์ œ ํ•ด๊ฒฐ ๊ฑด

 

์ƒ๋‹นํžˆ ์˜ค๋žœ๋งŒ์— ๋ธ”๋กœ๊ทธ ๊ธ€์„ ์ž‘์„ฑํ•˜๋Š”๋ฐ ์ด์œ ๊ฐ€ ์กฐ๊ธˆ ํ™ฉ๋‹นํ•˜๋‹ค.

 

์ตœ๊ทผ ํšŒ์‚ฌ์—์„œ ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ์•ฑ ๊ฐœ๋ฐœ๋„ ๋งก๊ฒŒ ๋˜์–ด์„œ ์•ฝ๊ฐ„์˜ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๊ฑด์ด ์žฆ์•„์กŒ๋‹ค.

 

์˜ค๋Š˜ ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•˜๋‹ค input tag์˜ radio ๋ฒ„ํŠผ์˜ checked ์†์„ฑ์ด ์ œ๋Œ€๋กœ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์„ ๋ฐœ๊ฒฌํ–ˆ๋‹ค.

 

๋ฌธ์ œ๋Š” ์ด๋Ÿฌํ–ˆ๋‹ค.

 

"๋ฒ„ํŠผ1"๊ณผ "๋ฒ„ํŠผ3"์ด checked ์†์„ฑ์œผ๋กœ ๊ธฐ๋ณธ load์‹œ checked๊ฐ€ ๋˜์–ด์•ผํ•˜๋Š”๋ฐ ์ด์ƒํ•˜๊ฒŒ "๋ฒ„ํŠผ1"์ด checked๊ฐ€ ๋˜์ง€์•Š๋Š” ๊ฒƒ์ด์—ˆ๋‹ค.

ํผ๋ธ”๋ฆฌ์‹ฑ์ด๋‚˜ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ๋งŽ์ด ํ•˜์…จ๋˜ ๋ถ„๋“ค์ด๋ผ๋ฉด ๋ˆˆ์น˜์ฑ„๊ฒ ์ง€๋งŒ ๋‚ด ์ฝ”๋“œ๋Š” ์ด๋Ÿฌํ–ˆ๋‹ค.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <ul>
            <li><input type="radio" name="btn" checked>๋ฒ„ํŠผ1</li>
            <li><input type="radio" name="btn" >๋ฒ„ํŠผ2</li>
        </ul>
        <ul>
            <li><input type="radio" name="btn" checked>๋ฒ„ํŠผ3</li>
            <li><input type="radio" name="btn" >๋ฒ„ํŠผ4</li>
        </ul>
    </div>
</body>
</html>

๋ฌธ์ œ๋Š” ๋ฐ”๋กœ input tage ์•ˆ์˜ name ์†์„ฑ์˜ ๊ฐ’์ด ๊ฐ™๋‹ค๋Š” ๊ฒƒ ์ด์—ˆ๋‹ค.

 

radio button์€ ๊ฐ™์€ ๊ทธ๋ฃน๋‚ด์—์„œ (๊ฐ™์€ name ์†์„ฑ) ํ•˜๋‚˜๋งŒ ์„ ํƒ(checked)๋  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

ํŽ˜์ด์ง€๊ฐ€ load๋˜๋Š” ์‹œ์ ์—์„œ ๋” ๋‚˜์ค‘์— checked๊ฐ€ ๋˜์–ด์žˆ๋Š” "๋ฒ„ํŠผ3"์ด ์ตœ์ข…์ ์œผ๋กœ checked ๋˜์–ด์„œ ํ‘œ๊ธฐ๊ฐ€ ๋œ ๊ฒƒ์ด๋‹ค.

 

๋‚ด๊ฐ€ ์›ํ–ˆ๋˜ ๊ฒฐ๊ณผ์ธ ํŽ˜์ด์ง€ load ์‹œ "๋ฒ„ํŠผ1" ๊ณผ "๋ฒ„ํŠผ3"์€ ๊ธฐ๋ณธ์œผ๋กœ checked ๋ฅผ ๊ฐ€์ ธ์˜ค๋ ค๋ฉด ์ฝ”๋“œ๋ฅผ ์•„๋ž˜์™€ ๊ฐ™์ด๋งŒ ์ˆ˜์ •ํ–ˆ์œผ๋ฉด ๋๋‹ค.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <ul>
            <li><input type="radio" name="btn1" checked>๋ฒ„ํŠผ1</li>
            <li><input type="radio" name="btn1" >๋ฒ„ํŠผ2</li>
        </ul>
        <ul>
            <li><input type="radio" name="btn2" checked>๋ฒ„ํŠผ3</li>
            <li><input type="radio" name="btn2" >๋ฒ„ํŠผ4</li>
        </ul>
    </div>
</body>
</html>

์ˆ˜์ •๊ฒฐ๊ณผ

์กฐ๊ธˆ ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ ์•„๋ž˜ ์‚ฌ์ดํŠธ์—์„œ ํ™•์ธ ๊ฐ€๋Šฅํ•˜๋‹ค.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/radio

 

<input type="radio"> - HTML: Hypertext Markup Language | MDN

radio ์œ ํ˜•์˜ <input> ์š”์†Œ๋Š” ๋ณดํ†ต ์„œ๋กœ ๊ด€๋ จ๋œ ์˜ต์…˜์„ ๋‚˜ํƒ€๋‚ด๋Š” ๋ผ๋””์˜ค ๋ฒ„ํŠผ ์ฝœ๋ ‰์…˜, ๋ผ๋””์˜ค ๊ทธ๋ฃน์— ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ž„์˜์˜ ๊ทธ๋ฃน ๋‚ด์—์„œ๋Š” ๋™์‹œ์— ํ•˜๋‚˜์˜ ๋ผ๋””์˜ค ๋ฒ„ํŠผ๋งŒ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ผ๋””์˜ค

developer.mozilla.org

๊ธฐ๋ณธ์ ์œผ๋กœ ๋‚˜๋Š” ์„œ๋ฒ„ ๊ฐœ๋ฐœ์ž์ด์ง€๋งŒ ์ด๋Ÿฐ ๊ฐ„๋‹จํ•œ ๋ถ€๋ถ„์„ ์ œ๋Œ€๋กœ ์ˆ™์ง€ํ•˜์ง€ ๋ชปํ–ˆ๋‹ค๋Š” ๊ฒƒ์— ๋‹นํ™ฉํ•˜๊ธฐ๋„ ํ–ˆ๊ณ  ๊ณผ๊ฑฐ์™€ ์ตœ๊ทผ์˜ ๊ณต๋ถ€๋Ÿ‰ ๋ถ€์กฑ์„ ๋ฐ˜์„ฑํ•˜๊ฒŒ ๋˜๋Š” ๊ณ„๊ธฐ๋„ ๋๋‹ค. ํ•ด๋‹น ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋˜ ๋‹ค์Œ๋‚  ์ƒˆ๋ฒฝ์— ์ž ์ด ๊นผ๋Š”๋ฐ ์ „๋‚ ์˜ ๋ฌธ์ œ๊ฐ€ ๊ณ„์† ์ƒ๊ฐ๋‚˜์„œ ๊ธ€์„ ์จ๋ณธ๋‹ค.

 

ํ™”๋ฉด๋‹จ์˜ ๊ฐœ๋ฐœ๋„ ์ง„ํ–‰ํ•ด์•ผํ•˜๋Š” ๋งŒํผ ์•ž์œผ๋กœ ํ”„๋ก ํŠธ์—”๋“œ ์ชฝ ๊ณต๋ถ€๋„ ๊พธ์ค€ํžˆ ํ•ด์•ผ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค๊ฒŒ ํ•ด์ค€ ๊ฒฝํ—˜์ด์—ˆ๋‹ค.

728x90
๋ฐ˜์‘ํ˜•