[javascript]샐렉트 박스(select)와 체크박스(checkbox) 값 제어 클릭 이벤트 동기화

체크박스와 샐렉트박스를 함께 컨트롤해야 할 과제가 생겼다.

무조건 체크박스는 한 가지만 선택이 되야만 하고 체크박스를 클릭하면 셀렉트박스도 같은 값이 선택이 돼야 한다.

반대로 셀렉트박스를 선택할 경우에도 해당되는 체크박스의 값이 체크가 돼야만 한다.

 

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가지만 선택가능해야 하기에 다른 체크박스를 누를 경우 기존에 체크박스는 해제시켜 준다.

 

 

 

이렇게 간단히 샐렉트 박스와 체크박스를 동시에 컨트롤할 수 있게 되었다.