<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<title>테스트 페이지</title>
</head>
<style>
div {
border: 1px solid black;
}
</style>
<body>
<br>
<br>
<div>
<label>초등학교 </label>
<input id="school" type="radio" name="school" value="초등학교" checked/>
<label>중학교 </label>
<input id="school" type="radio" name="school" value="중학교" />
<label>취미 </label>
<input id="school" type="radio" name="school" value="고등학교" />
<label>대학교 </label>
<input id="school" type="radio" name="school" value="대학교" />
</div>
<br>
<div>
<label>남 </label>
<input id="sex" type="radio" name="sex" value="남" checked/>
<label>여 </label>
<input id="sex" type="radio" name="sex" value="여" />
</div>
<br>
<div>
<label>1학년 </label>
<input id="grade" type="radio" name="grade" value="1학년" checked/>
<label>2학년 </label>
<input id="grade" type="radio" name="grade" value="2학년" />
<label>3학년 </label>
<input id="grade" type="radio" name="grade" value="3학년" />
</div>
<button id="school_init">학교 초기화</button>
<button id="grade_init">학년 초기화</button>
<button id="name_all_init">name으로 초기화</button>
<button id="id_all_init">id으로 초기화</button>
<script>
$(function () {
$("#school_init").click(function () {
$('input[name="school"]').removeAttr('checked');
//체크되어있는 항목 모두 해제
$('input[name="school"]').filter("[value=초등학교]").prop("checked", true);
// value 값 초등학교에만 선택
});
$("#grade_init").click(function () {
$('input[name="grade"]').removeAttr('checked');
//체크되어있는 항목 모두 해제
$('input[name="grade"]')[0].checked = true;
//name grade의 0번째만 체크하기
});
$("#name_all_init").click(function () {
var radio_name = [];
var radio = $("input[type=radio]"); //라디오 정보를 가져옵니다.
$.each(radio, function (key, value) { // input radio의 name 값을 가져옵니다.
radio_name.push($(value).attr('name'));
});
console.log(radio_name);
radio_name = $.unique(radio_name.sort()).sort(); //중복요소 이름을 제거
console.log(radio_name);
for (var i = 0; i < radio_name.length; i++) {
$('input[name="' + radio_name[i] + '"]').removeAttr('checked');
//체크되어있는 항목 모두 해제
$('input[name="' + radio_name[i] + '"]')[0].checked = true;
//name에서 첫번쨰 요소만 선택
}
});
$("#id_all_init").click(function () {
var radio_id = []; //id 값을 넣을 배열
var radio = $("input[type=radio]"); // 모든 라디오 접근
$.each(radio, function (key, value) {
radio_id.push($(value).attr('id')); // id 값만을 추출
});
radio_id = $.unique(radio_id.sort()).sort(); //중복요소제거
var input_radio; // 라디오 id로 접근하기 위해서
for (var i = 0; i < radio_id.length; i++) {
input_radio = $("input[id=" + radio_id[i] + "]");
$.each(input_radio, function (key, value) {
if (key === 0) { //첫번째 요소만 체크하고
$(this).prop("checked", true);
} else { // 나머지는 체크를 해제
$(this).prop("checked", false);
}
console.log(key);
console.log(value);
});
}
});
});
</script>
</body>
