'jquery 라디오 모두 초기화'에 해당되는 글 1건

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.







도움이 되셨다면, 구독과 좋아요.... 아니아니 ...

공감 버튼 꾸욱 눌러주세요 ~~







블로그 이미지

미나미나미

,