티스토리 뷰
라디오체크
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#fdbd39" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#121826" media="(prefers-color-scheme: dark)" />
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; line-height:1;}
body { padding: 100px;}
button { font-size:30px; border:1px solid red}
button.active { background:#999; border:2px solid blue}
</style>
</head>
<body>
<div id="wrap">
<div>
<span>1</span>
<input type="radio" name="radio1"> <label>예</label>
<input type="radio" name="radio1"> <label>아니오</label>
</div>
<br><br>
<div>
<span>2</span>
<input type="radio" name="radio2"> <label>예</label>
<input type="radio" name="radio2"> <label>아니오</label>
</div>
<br><br>
<div>
<span>3</span>
<input type="radio" name="radio3"> <label>예</label>
<input type="radio" name="radio3"> <label>아니오</label>
</div>
<br><br>
<button type="button" class="all">전체 동의</button>
<br><br>
<button type="button" class="button">버튼</button>
</div>
<script>
radioObj = {}
var radioName = ['radio1', 'radio2', 'radio3']; // 체크해야할 Radio Name 넣어주세요.
var radioCheck = function(allClick){
$.each(radioName, function(index, elm) {
radioObj[elm] = false;
if(allClick) {
radioObj[elm] = allClick;
$('input:radio[name='+elm+']').eq(0).prop('checked', true);
$('.button').addClass('active')
}
$('input:radio[name='+elm+']').on('change',function() {
radioObj[elm] = $('input:radio[name='+elm+']').eq(0).is(':checked')
keys = Object.keys(radioObj).filter(boolean => radioObj[boolean])
if(Object.keys(radioObj).length === keys.length) {
$('.button').addClass('active')
} else {
$('.button').removeClass('active')
}
})
});
}
$('.all').on('click', function() {
radioCheck(true)
});
</script>
</body>
</html>