체크박스와 샐렉트박스를 함께 컨트롤해야 할 과제가 생겼다.
무조건 체크박스는 한 가지만 선택이 되야만 하고 체크박스를 클릭하면 셀렉트박스도 같은 값이 선택이 돼야 한다.
반대로 셀렉트박스를 선택할 경우에도 해당되는 체크박스의 값이 체크가 돼야만 한다.
HTML
<label class="checkbox" >
<input type="checkbox" name="chkArcType" id="chkType1" value="A" /><i></i>
<div class="label" >타입A</div>
</label>
<label class="checkbox" >
<input type="checkbox" name="chkArcType" id="chkType2" value="B" /><i></i>
<div class="label" >타입B</div>
</label>
<label class="checkbox" >
<input type="checkbox" name="chkArcType" id="chkType3" value="C" /><i></i>
<div class="label" >타입C</div>
</label>
<label class="select" style="width:95px;">
<select class="input-sm" name="articleType">
<option value="N" selected="selected">선택하세요.</option>
<option value="A">타입A</option>
<option value="B">타입B</option>
<option value="C">타입C</option>
</select> <i></i>
</label>
간단하게 name이 chkArcType인 체크박스 3개와 name이 articleType인 셀렉트박스 1개를 만들어줬다.
javascript
$("select[name='articleType']").change(function() {
console.log('select[name=articleType].change');
var type = $(this).val();
console.log('type : ' + type);
setArcCheck(type);
setCheckboxCheck(type);
});
//체크박스 클릭이벤트
$("input:checkbox[name='chkArcType']").click(function(e) {
console.log('input:checkbox[name=chkArcType] click');
//체크된 체크박스 행동
if($(this).is(":checked")){
var type = $(this).val();
console.log('type :' + type);
setArcCheck(type);
//다른 체크박스 체크해제
setCheckboxCheck(type);
}else{
setArcCheck("N");
setCheckboxCheck("N");
}
});체크박스를 누르거나 샐렉트박스를 선택할 경우 공통의 함수를 호출했다.
//선택한 값에 따른 처리
function setArcCheck(type){
console.log('setArcCheck : ' + type);
if (type == "A") {
} else if (type == "B") {
} else if (type == "C") {
}else{
}
}공통의 함수에서는 값에 따른 카테고리 변경이나 다른 엘리먼트들의 속성을 변경해준다.
//동기화
function setCheckboxCheck(type){
console.log("setCheckboxCheck :" + type);
$("select[name='articleType']").val(type);
$("input[name=chkArcType]").each(function() {
var checkVal = $(this).val();
if (type != checkVal) {
console.log("this check not :" + checkVal);
$("input[name=chkArcType][value="+checkVal+"]").prop("checked",false);
}else{
console.log("this check :" + checkVal);
$("input[name=chkArcType][value="+checkVal+"]").prop("checked",true);
}
});
}그리고 무조건 1가지만 선택가능해야 하기에 다른 체크박스를 누를 경우 기존에 체크박스는 해제시켜 준다.
이렇게 간단히 샐렉트 박스와 체크박스를 동시에 컨트롤할 수 있게 되었다.