الفرق بين المراجعتين لصفحة: «jQuery/checkbox selector»
< jQuery
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:المحدد <code>:checkbox</code> في jQuery}}</noinclude> | <noinclude>{{DISPLAYTITLE:المحدد <code>:checkbox</code> في jQuery}}</noinclude> | ||
== المحدد <code>:checkbox</code> == | == المحدد <code>:checkbox</code> == | ||
المراجعة الحالية بتاريخ 13:26، 23 مايو 2018
المحدد :checkbox
الوصف
يُستخدَم المُحدِّد :checkbox في تحديد جميع العناصر ذات النوع مربّع تأشير (checkbox).
jQuery( ":checkbox" )
أضيفت في الإصدار: 1.0.
يُكافِئ التعبير $( ":checkbox" ) استخدام $( "[type=checkbox]" ). وكما هو الحال مع مُحدِّدات الأصناف الزائفة (تلك التي تبدأ بـ ":") فمن المفضّل أن نسبقها باسم العنصر أو أي مُحدِّد آخر وإلّا سيُطبَّق المُحدِّد العام (universal selector). أي بمعنى آخر تُكافِئ $( ':checkbox' ) كتابة $( "*:checkbox" ) لذلك يجب استخدام $("input:checkbox") بدلًا من ذلك.
ملاحظات إضافيّة
- لمّا كان
:checkboxعبارة عن امتداد jQuery وليس جزءًا من مواصفات CSS، فلن تستفيد الاستعلامات التي تستخدم:checkboxمن زيادة الأداء المُقدَّمة عن طريق التّابعquerySelectorAll()الأصلي في DOM، وللحصول على أداء أفضل في المتصفحات الحديثة استخدم[type="checkbox"] بدلًا من ذلك.
أمثلة
إيجاد كافّة مربّعات التأشير:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>مثال عن المحدد checkbox</title>
<style>
textarea {
height: 25px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form>
<input type="button" value="زر إدخال">
<input type="checkbox">
<input type="checkbox">
<input type="file">
<input type="hidden">
<input type="image">
<input type="password">
<input type="radio">
<input type="reset">
<input type="submit">
<input type="text">
<select>
<option>خيار</option>
</select>
<textarea></textarea>
<button>زر</button>
</form>
<div></div>
<script>
var input = $( "form input:checkbox" )
.wrap( "<span></span>" )
.parent()
.css({
background: "yellow",
border: "3px red solid"
});
$( "div" )
.text( "بالنسبة لهذا النوع وجد " + input.length + "عنصر." )
.css( "color", "red" );
// منع تقديم الطلب
$( "form" ).submit(function( event ) {
event.preventDefault();
});
</script>
</body>
</html>