잡담
radio와 checkbox는 상당히 많이 사용하는 내용입니다. 예를 들면 설문조사할 때 radio버튼은 꼭 들어가고, 약관동의 같은 경우는 checkbox를 많이 사용합니다. 어렵지는 않지만 여러 가지 방법에 대한 예제가 있으니 참고하면 좋을 것 같습니다.
1. radio
jQuery를 사용하여 라디오 버튼을 조작하려면 다음과 같이 할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function myFunc(){
var result=$("input[name='radio-group1']:checked").val()
//input중에 이름이 radio-group1인것 중에 check된것의 value값 가져오기
alert(result)
}
</script>
</head>
<body>
<input type="radio" name="radio-group1" value="A" checked>
<input type="radio" name="radio-group1" value="B">
<input type="radio" name="radio-group1" value="O">
<button onclick="myFunc()">클릭</button>
</body>
</html>
See the Pen jQuery radio by 이현석 (@loxshqac-the-styleful) on CodePen.
위 코드는 라디오 버튼의 값을 가져오고, 특정 라디오 버튼을 선택하는 방법을 보여줍니다. 라디오 버튼은 동일한 name 속성을 가진 여러 요소 중 하나를 선택하는 데 사용됩니다. jQuery를 사용하여 선택된 라디오 버튼의 값을 가져오거나 선택된 라디오 버튼을 변경할 수 있습니다.
2. checkbox
jQuery를 사용하여 체크박스를 조작하는 방법은 라디오 버튼과 유사합니다. 체크박스는 여러 개 선택이 가능한 반면 라디오 버튼은 하나만 선택할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function myFunc(){
var result=$("#chk").is(":checked")
alert(result)//true, false
}
</script>
</head>
<body>
<input type="checkbox" id="chk" value="my-val">
<button onclick="myFunc()">클릭</button>
</body>
</html>See the Pen jQuery check by 이현석 (@loxshqac-the-styleful) on CodePen.
이 코드는 체크박스를 선택하고 버튼을 클릭하면 체크박스가 체크되어 있는지 확인하고, 체크되어 있다면 체크된 체크박스의 값을 가져와서 알림창에 표시합니다.
여기서 jQuery를 사용하여 체크박스의 상태를 확인하고 값에 접근하는 부분이 포함되어 있습니다. is(":checked") 메서드를 사용하여 체크박스가 체크되어 있는지 확인하고, val() 메서드를 사용하여 체크된 체크박스의 값을 가져옵니다.
코드를 실행하면 체크박스를 선택하고 버튼을 클릭하면 체크된 체크박스의 값을 알림창에 표시합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function myFunc(){
var result=$("#chk").is(":checked")
if(result===true){//체크되어있으면
var val = $("#chk").val()
alert(val)
}
}
</script>
</head>
<body>
<input type="checkbox" id="chk" value="my-val">
<button onclick="myFunc()">클릭</button>
</body>
</html>See the Pen jQuery check2 by 이현석 (@loxshqac-the-styleful) on CodePen.
이 코드는 페이지가 로드될 때 "클릭" 버튼을 누르면 체크박스가 선택되도록 만듭니다. prop() 메서드를 사용하여 체크박스의 checked 속성을 true로 설정합니다.
여기서 사용한 prop() 메서드는 jQuery의 속성 설정 및 가져오기에 사용됩니다. 이를 통해 요소의 속성을 동적으로 변경할 수 있습니다.
코드를 실행하고 "클릭" 버튼을 누르면 체크박스가 선택됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function myFunc(){
$("#chk").prop('checked',true)
//property
}
</script>
</head>
<body>
<input type="checkbox" id="chk" value="my-val">
<button onclick="myFunc()">클릭</button>
</body>
</html>See the Pen jQuery check3 by 이현석 (@loxshqac-the-styleful) on CodePen.
이 코드는 체크박스 그룹에서 선택된 체크박스의 값을 가져와서 알림창에 표시하는 간단한 예제입니다.
JavaScript 함수 myFunc()에서는 jQuery를 사용하여 체크박스 그룹에서 선택된 체크박스의 값을 가져오고, alert() 함수를 사용하여 해당 값을 알림 창에 표시합니다.
체크박스 그룹을 구성하는 각 체크박스에는 동일한 name 속성이 지정되어 있어야 합니다. 이것이 jQuery 선택자 input[name=check-group1]:checked에서 사용되는 방식입니다. 이 선택자는 check-group1이라는 이름을 가진 체크박스 그룹 중에서 선택된 체크박스를 선택합니다.
코드를 실행하고 "클릭" 버튼을 누르면 선택된 체크박스의 값을 알림창에 표시합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function myFunc(){
var result=$("input[name=check-group1]:checked").val()
alert(result)
}
</script>
</head>
<body>
<input type="checkbox" id="chk1" name="check-group1" value="japan">
<input type="checkbox" id="chk2" name="check-group1" value="china">
<input type="checkbox" id="chk3" name="check-group1" value="thailand">
<button onclick="myFunc()">클릭</button>
</body>
</html>See the Pen jQuery check4 by 이현석 (@loxshqac-the-styleful) on CodePen.
이 코드는 체크박스 그룹에서 선택된 모든 체크박스의 값을 가져와서 각각 알림 창에 표시하는 예제입니다.
JavaScript 함수 myFunc()에서는 jQuery의 each() 메서드를 사용하여 선택된 모든 체크박스에 대해 반복하고 각 체크박스의 값을 가져와서 알림 창에 표시합니다.
체크박스 그룹을 구성하는 각 체크박스에는 동일한 name 속성이 지정되어 있어야 합니다. 이것이 jQuery 선택자 input[name=check-group1]:checked에서 사용되는 방식입니다. 이 선택자는 check-group1이라는 이름을 가진 체크박스 그룹 중에서 선택된 체크박스를 선택합니다.
코드를 실행하고 "클릭" 버튼을 누르면 선택된 모든 체크박스의 값을 알림창에 표시합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function myFunc(){
var result=$("input[name=check-group1]:checked").each(
function(){
var val = $(this).val()
alert(val)//china,thailand
}
)
//체크된 체크박스 정보가 each메서드의 콜백함수로 넘어가서
//$(this) - 대상 - 체크된 체크박스 위치
}
</script>
</head>
<body>
<input type="checkbox" id="chk1" name="check-group1" value="japan">
<input type="checkbox" id="chk2" name="check-group1" value="china">
<input type="checkbox" id="chk3" name="check-group1" value="thailand">
<button onclick="myFunc()">클릭</button>
</body>
</html>See the Pen jQuery check5 by 이현석 (@loxshqac-the-styleful) on CodePen.
글을 마치며
비슷하게 보이지만 조금씩 다 다릅니다. 쓰임새도 조금씩 다르니 하나씩 예제 확인해 보면 좋을 것 같습니다. 감사합니다.
'Java Script > jQuery' 카테고리의 다른 글
| [Java Script] jQuery / width, height, attr (0) | 2024.05.01 |
|---|---|
| [Java Script] jQuery / val, text, html (0) | 2024.04.30 |
| [Java Script] jQuery 사용법 (0) | 2024.04.26 |
| [Java Script] jQuery / even, odd, lt, gt, eq (1) | 2024.04.26 |
| [Java Script] jQuery / prev, prevAll, prevUntil, next, nextAll, nextUntil, siblings (0) | 2024.04.26 |