본문 바로가기
프로그래밍 놀이터/Web

[jQuery] Checkbox 와 RadioButton 에 대해 알아보자.

by 돼지왕 왕돼지 2013. 7. 3.
반응형


 jQuery, Checkbox 와 RadioButton 에 대해 알아보자.

 

[jQuery] Checkbox 와 RadioButton 에 대해 알아보자.



Checkbox 만들기


<!-- 첫번째 방법 -->

<label><input type="checkbox" id="checkbox1" onClick="checkBox1(); "/>Cheese</label>


<!-- 두번째 방법 -->

<input type="checkbox" id="checkbox2" onClick="checkBox2();" />

<label for="checkbox2">Pepper</label>


위와 같이 2가지 방법으로 만들 수 있다.


<input type="checkbox"/> 의 경우는 기본적으로 checkbox 만 표시한다.

따라서 checkbox 와 label 을 함께 표시하기 위해서는 checkbox 를 label 태그 안에 위치시켜야 한다.


두번째 방법은 label 에 for 속성을 주어, checkbox 와 연결해주는 방식이다.

이는 checkbox 뿐만 아니라 다른 form tag 등에도 적용될 수 있지만,

직접적으로 display 에 영향을 미치는 녀석은 checkbox 와 radio button 이다.




CheckBox 값 체크하기


if ( $("#checkbox1").is(":checked") == true ){

...

}


위의 조건식을 통해서 해당 checkbox 가 check 상태인지, uncheck 상태인지 조회할 수 있다.







fieldset 으로 묶기


<fieldset data-role="controlgroup" data-type="horizontal">

<label><input type="checkbox" id="checkbox3" onClick="checkBox1(); "/>Cheese</label>

<input type="checkbox" id="checkbox4" onClick="checkBox2();" />

<label for="checkbox4">Pepper</label>

</fieldset>


위와같이 fieldset 을 이용하여 checkbox들을 묶어주면, group 으로 묶어서 처리하게 된다.

이 때 data-role="controlgroup" 으로 assign 해주어야 한다.


이 group 은 checkbox 에서는 display 상의 변화밖에 영향력이 없지만,

radiogroup 같은 경우는 한가지만 선택가능한 형태이기 때문에 영향력이 크다.


data-type 의 값은 vertical 이 기본값이며, horizontal 로 할 경우 한 라인에 배치된다.






FlipSwitch 만들기


<select>, <option> 태그를 이용하여 FlipSwitch 를 만들 수 있다.


<select id="flipswitch" onChange="changeOption();">

<option value="off">Off</option>

<option value="on">On</option>

</select>


위의 경우는 Drop down 방식을 이용하여 2가지 옵션을 가지는 스위치의 형태인데, 다음과 같은 js 로 값을 가져올 수 있다.


function changeOption(){

var switchComponent = $("#flipswitch")[ 0 ];

var switchedValue = switchComponent.selectedIndex + "-" + 

switchComponent.options[ switchComponent.selectedIndex ].value;

$("#labelMessage").text( switchedValue );

}


이렇게 2가지의 option 만 제공할 경우는 flip switch 로 만들 수 있다.

data-role="slider" 로만 지정해주면 된다.


<select id="flipswitch" data-role="slider" onChange="changeOption();">

<option value="off">Off</option>

<option value="on">On</option>

</select>


만약 option 을 더 많이 주면, 이상하게 작동한다.


[jQuery] Checkbox 와 RadioButton 에 대해 알아보자.




Radio 컨트롤 만들기


<legend>Choose a pet:</legend>

<label><input type="radio" name="radioPet" checked/>Cat</label>

<label><input type="radio" name="radioPet"/>Dog</label>

<label><input type="radio" name="radioPet"/>Hamster</label>





radio control 을 만들때도 마찬가지로, label 값을 주어야 라디오 버튼과 text 가 한벌이 될 수 있다.

name 값이 같은 radio 버튼은 한 set 의 radio button 으로 연결된다.


[jQuery] Checkbox 와 RadioButton 에 대해 알아보자.


radio 버튼도 checkbox 와 마찬가지로 fieldset 으로 묶어주면, 더욱 더 결속력 있는 하나의 set 으로 보인다.


<fieldset data-role="controlgroup">

<legend>Choose a pet:</legend>

<label><input type="radio" name="radioPet" checked/>Cat</label>

<label><input type="radio" name="radioPet"/>Dog</label>

<label><input type="radio" name="radioPet"/>Hamster</label>

</fieldset>


[jQuery] Checkbox 와 RadioButton 에 대해 알아보자.


FYI) label 대신 legend 를 써준 이유는, controlgroup 으로 묶었을 때 margin 때문.

lagend 가 더욱 더 보기 좋은 margin 을 가지고 있다. ( radio 버튼과 조금 더 떨어져 있다. )




Radio Button Selection 값 가져오기.


<fieldset data-role="controlgroup" data-type="horizontal">

<legend>Choose a pet:</legend>

<label><input type="radio" name="radioPet" value="cat" checked onClick="onRadioSelected( this )" />Cat</label>

<label><input type="radio" name="radioPet" value="dog" onClick="onRadioSelected( this )"/>Dog</label>

<label><input type="radio" name="radioPet" value="hamster" onClick="onRadioSelected( this )"/>Hamster</label>

</fieldset>


위와 같이 Radio button 이 눌리는 순간, 자기 자신을 전달해주는 방식으로 값을 가져올 수도 있고,


function onRadioSelected( radioButton ){

$("#labelMessage").text( radioButton.value );

}



form 태그 안에 모든 녀석을 넣어두고, form 태그에 다른 버튼을 하나 만들어 form 을 전달하여 접근할수도 있다.


<form>

<fieldset data-role="controlgroup" data-type="horizontal">

<legend>Choose a pet:</legend>

<label><input type="radio" name="radioPet" value="cat" checked />Cat</label>

<label><input type="radio" name="radioPet" value="dog"/>Dog</label>

<label><input type="radio" name="radioPet" value="hamster" />Hamster</label>

</fieldset>

<input type="button" value="Check" onClick="findSelected( this.form );" />

</form>





function findSelected( form ){

for( var i=0; i < form.radioPet.length; i++ ){

if ( form.radioPet[ i ].checked == true ){

$("#labelMessage").text( form.radioPet[ i ].value + " is selected. " );

}

}

}







반응형

댓글