التعامل مع الـcheckboxes

هذه طريقة بسيطة للتعامل مع مربعات تحديد الخيارات او الـcheckboxes ، لاحظو ان الطريقة ليست تقليدية ، فهي تقوم بالتحقق من اختيار مربع واحد على الاقل قبل الارسال بالاضافة لانها تقوم باظهار رسالة تأكيد ايضاً قبل الارسال .. ، قم بتطبيق المثال لصورة اوضح ..

<script type="text/javascript">
function check_all(element_name, flag, submit) {
var inputs = document.getElementsByTagName('input');
var c = false;
if (flag != false && flag != true) {
flag = true;
}
if (submit != false && submit != true) {
submit = false;
}
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'checkbox' && inputs[i].name == element_name) {
if (submit == false) {
inputs[i].checked = flag;
} else if (submit == true) {
if (inputs[i].checked == true) {
c = true;
}
}
}
}
if (submit == true) {
if (c == false) {
alert('you didn\'t check any box..');
return c;
} else {
return confirm('are you sure?');
}
}
}
</script>

<form method="post" action="print_r_post_id.php">
<div><input type="checkbox" name="id[]" value="1" /> 1</div>
<div><input type="checkbox" name="id[]" value="2" /> 2</div>
<div><input type="checkbox" name="id[]" value="3" /> 3</div>
<div><input type="button" value="check all" onclick="javascript:check_all('id[]', true);" /> <input type="button" value="uncheck all" onclick="javascript:check_all('id[]', false);" /> <input type="submit" value="delete" onclick="javascript:return check_all('id[]', null, true);" /></div>
</form>

والملف الذي سيستقبل النتائج print_r_post_id.php سيكون على الشاكلة ..

<?php
echo '<pre>';
print_r($_POST['id']);
echo '</pre>';
?>

بالنسبة لـ jquery فيتم تحديد المربعات في حالتنا من خلال سطر واحد ..

$('#form input[name="id[]"][type="checkbox"]').attr('checked', true);

jquery

هذه المكتبة قامت بتوفير الكثير من الجهد على المطورين بلغة javascript ، كتابة البرامج الآن أصبحت أكثر متعة وسهولة ، بإختصار .. هذه المكتبة لاتوصف ! ، إذا كنت مطور ويب ولم تبدأ في التعامل مع هذه المكتبة .. فأنت تفوّت الكثير على نفسك ..

الـ selectors أصبحت أكثر سلاسة .. فمثلاً في السابق كنا نستخدم الدالة getElementByID أما الآن فيكفي إستخدام

$('#element-id');

الـ ajax أصبح أكثر سلاسة وسهولة ..

$.get('title.php', { id: $('#id').val() }, function(data) {
$('#result').html('<h2>' + data.title + '</h2>');
}, 'json');

بالإضافة للتأثيرات الرائعة و التعامل المميز مع الأحداث .. وإلى آخره من المميزات التي تضاف جميعها الى كون المكتبة مفتوحة المصدر !

إذا لم تبدأ في تعلّم هذه المكتبة فيمكنك البدء من الموقع الخاص بالمكتبة ، هذه المكتبة قام بكتابتها john resig العبقري بالفعل والذي يبلغ من العمر 24 عاماً !