jQuery cara mengambil nilai input dari checkbox

Latarbelakang

Checkbox merupakan salah satu elemen dalam form. Checkbox biasanya digunakan untuk pilihan boolean atau dalam bahasa Indonesia iya atau tidak. Jika checkbox dikirim melalui post maka nilainya akan keluar tapi jika checkbox tidak di check maka parameter itu tidak akan ada hasilnya.

Untuk itu, supaya bisa dilakukan pemrosesan ada beberapa trik untuk melakukannya. Salah satunya adalah dengan menggunakan format Comma Separated Value (CSV).

Contoh Kasus

Contoh ada form html seperti ini.

<form id="ftest" action="proses.php" method="post">

<div id="cbtest">
<input type="checkbox" name="test1" checked />
<input type="checkbox" name="test2" />
</div>

</form>

Jika di proses passing parameternya melalui post oleh php maka hasilnya akan seperti berikut ini:

file proses.php

var_dump($_POST);
$_POST[test1] = on; 

Sedangkan Parameter yang tidak di check parameternya tidak muncul. Coba bayangkan, bagaimana jika ada 1000 checkbox? sunguh rumit bukan.

Solusi

Menggunakan jQuery dengan format CSV kedalam satu inputan semu / inputan temporary.

Tambahkan inputan semu didalam form html.

<form id="ftest" action="proses.php" method="post">


<div id="cbtest">
<input type="checkbox" name="test1" data-id="test1" checked />
<input type="checkbox" name="test2" data-id="test2" />
</div>


<input type="text" id="cbtext" name="multicbtest" />
</form>

Sebelum form dikirim, maka lakukan proses pemfilteran dulu dengan mengunakan jQuery.

$("#ftest").on("submit",function(e){
e.preventDefault(); //menjaga biar ga langsung post formnya
var checkboxsemua = $("#cbtest").find("input");
var v = '';//ini digunakan untuk menyimpan string csv
$.each(checkboxsemua,function(i){
v += $(this).attr("data-id")+",";
});
$("#cbtext").val(v.slice(0, -1));
});

Sementara proses.php isinya sebagai berikut:

$multicbtest = $_POST['multicbtest'];
$multicbtestarray = explode(",",$mutlicbtest");

Demikian.