Radio button dan checkbox adalah dua kontrol yang sering kita gunakan dalam aplikasi web. Namun, ternyata untuk mengolahnya tidak semudah yang kita harapkan, seperti jika kontrol itu bertipe text. Mari kita ulik contoh-contoh mengolah input dengan tipe radio dan checkbox.

Radio Button

Misalkan ini kode HTML-nya:

<form action="#n" name="theForm">

    <label for="gender">Gender: </label>
    <input type="radio" name="genderS" value="1" checked> Male
    <input type="radio" name="genderS" value="0" > Female<br><br>
    <a href="javascript: submitForm()">Search</A>
</form>

Menggunakan jQuery:

$('input[name="genderS"]:checked').val();

Menggunakan javascript murni:

var radios = document.getElementsByName('genderS');

for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
        // do whatever you want with the checked radio
        alert(radios[i].value);

        // only one radio can be logically checked, don't check the rest
        break;
    }
}

Atau ada juga cara lain:

document.querySelector('input[name="genderS"]:checked').value;

Bagaimana men-set-nya?

Kode HTML:

<form name="gendersForm">
  <input type="radio" name="gender" value="M" /> Man
  <input type="radio" name="gender" value="F" /> Woman
</form>

Javascriptnya:

document.gendersForm.gender.value="M";

Untuk mencobanya, silakan buka laman ini: http://jsfiddle.net/sbrbot/dbswj90m/

Checkbox

var x=$("#checkbox").is(":checked");

Untuk mengesetnya, bisa digunakan jQuery seperti ini:

$('#isadmin').prop('checked', true);

atau jika disetting false

$('#isadmin').prop('checked', false);

Sumber:
http://stackoverflow.com/questions/9618504/get-radio-button-value-with-javascript
http://stackoverflow.com/questions/11599666/get-the-value-of-checked-checkbox

Advertisements