[JQuery] 여러 체크박스 클릭 시, 하나만 선택하는 방법

 

여러 체크박스 클릭 시, 하나만 선택하는 방법

 

체크박스가 여러 개 있으면 하나만 선택되는 것이 아닌, 체크하는 만큼 클릭이 됩니다.

이것은 라디오 버튼과 별개로 체크박스 특성때문인데요.

제이쿼리를 이용하여 해결할 수 있습니다.

 

---

 

JSP

 

우선 JSP 입니다.

여기에서는 제이쿼리에서 사용할 name값을 설정해줍니다.

 

 

 

<tr>
 
<th class="active" style="text-align:right">기업종류</th>
 
<td class="form-inline">
 
<input type="checkbox" id="cs_biz_form" name="cs_biz_form" value="A">
 
<input type="checkbox" id="cs_biz_form" name="cs_biz_form" value="B">
 
<input type="checkbox" id="cs_biz_form" name="cs_biz_form" value="C">
 
<input type="checkbox" id="cs_biz_form" name="cs_biz_form" value="D">
 
<input type="checkbox" id="cs_biz_form" name="cs_biz_form" value="E">
 
<input type="checkbox" id="cs_biz_form" name="cs_biz_form" value="F">
 
<br><br>
 
<input type="checkbox" id="cs_biz_form" name="cs_biz_form" value="G">
 
<input type="checkbox" id="cs_biz_form" name="cs_biz_form" value="H">
 
</td>
 
</tr>

 

 

JQUERY

 

그 다음 제이쿼리입니다.

여기서 사용되는 prop() 메소드입니다.

Prop()는 지정된 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가하며,

javascript의 속성(property)를 다룹니다.

 

if($(this).prop('checked')){

if문부터 해석하자면 만약에 체크박스가 클릭되어있으면,

 

 $('input[type="checkbox"][name="cs_biz_form"]').prop('checked',false);

checkbox 전체를 checked 해제 후, 

 

$(this).prop('checked',true);

click한 요소만 true 지정

 

 

으로 해석하시면 됩니다.

 

 

<style>
 
$(document).ready(function() {
 
 
 
 $('input[type="checkbox"][name="cs_biz_form"]').click(function(){
 
  if($(this).prop('checked')){
 
     $('input[type="checkbox"][name="cs_biz_form"]').prop('checked',false);
 
     $(this).prop('checked',true);
 
    }
  
   });
  
 });
   
</style>

 

번외로,

attr()는 html의 속성(attribute)을 다루고, .

prop()는 javascript의 속성(property)을 다루는 차이점이 있습니다.

 

예를 들어,

Attr(“checked”); 와 prop(“checked”); 가 있다면

Attr의 값은 checked

Prop는 true가 됩니다.