jquery 모든 radio button 모두 초기화 하기
jQuery로 모든 라디오 버튼을 초기화는 방법을 알아보겠습니다.
1번째, 학교로 구성된 radio button 초기화 하기
2번째, 학교로 구성된 radio button 초기화 하기
3번째, name으로 모든 radio button 초기화하기
4번째, id으로 모든 radio button 초기화하기
<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>
1번째 - name으로 접근하고, Value값을 안다고 가정할때, 사용하는 방법
아래와 같은 방법으로 실행합니다.
$("#school_init").click(function () {
$('input[name="school"]').removeAttr('checked');
//체크되어있는 항목 모두 해제
$('input[name="school"]').filter("[value=초등학교]").prop("checked", true);
// value 값 초등학교에만 선택
});
2번째 - name으로 접근하고, name[0] 값에만 checked
아래와 같은 방법으로 실행합니다.
$("#grade_init").click(function () {
$('input[name="grade"]').removeAttr('checked');
//체크되어있는 항목 모두 해제
$('input[name="grade"]')[0].checked = true;
//name grade의 0번째만 체크하기
});
3번째 - 모든 radio의 name으로 접근하고,
배열로 만든 name의 값의 중복을 해제하고,
배열 순번에 따라 name을 접근하여서,
모든 체크를 해제 후,
1번째 요소만 체크를 합니다.
$("#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);
//(9) ["school", "school", "school", "school", "sex", "sex", "grade", "grade", "grade"] log값
radio_name = $.unique(radio_name.sort()).sort(); //중복요소 이름을 제거
console.log(radio_name);
//(3) ["grade", "school", "sex"] log 값
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에서 첫번쨰 요소만 선택
}
});
3번째 - 모든 radio의 id으로 접근하고,
배열로 만든 id 값의 중복을 해제하고,
배열 순번에 따라 id을 접근하여서,
key 값이 0 번째 일 경우 체크를 하고,
나머지는 체크를 해제하여 줍니다.
$("#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);
});
}
});
log값
See the Pen radio_init by Nami (@NamuNami) on CodePen.
도움이 되셨다면, 구독과 좋아요.... 아니아니 ...
공감 버튼 꾸욱 눌러주세요 ~~
'[javascript]' 카테고리의 다른 글
| 자바스크립트(javascript)로 pdf 파일 만들기 (0) | 2018.06.19 |
|---|---|
| jquery 모든 radio button 모두 값 가져오기 (0) | 2018.05.01 |
| jquery input 값 변경 확인하기 (onchange 함수) (0) | 2018.04.30 |
| jquery 선택자(selectors) 부모(parent) > 자식(child) 배경화면 랜덤으로 바꾸기 (0) | 2018.04.27 |
| 비주얼 스튜디오 코드 한줄 ,복사 지우기 , 정렬 , 주석 단축키 (0) | 2018.04.27 |
미나미나미