[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 을 더 많이 주면, 이상하게 작동한다.

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 으로 연결된다.

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>

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. " );

}

}

}

CheckBox, Checked, controlgroup, data-role, data-role="controlgroup", data-role="slider", data-type, data-type="horizontal", FIELDSET, Flipswitch, form, form 태그, is(":checked"), jQuery, jQuery checkbox, jQuery Mobile, jquery radio button, Label, Legend, Name, option, radio button, radio control, select, Value