المحدد ‎‎‎:radio‎‎ في jQuery

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

المحدد ‎:radio

الوصف

يحدِّد جميع عناصر الإدخال <input> ذات النوع radio.

‎jQuery( ":radio" )‎

أُضيف مع الإصدار: 1.0.

المحدِّد ‎$( ":radio" )‎ يكافئ ‎$( "[type=radio]" )‎. يفضَّل أن يُسبق هذا المحدِّد، كما في محدِّدات الصنف الزائف (pseudo-class selectors) التي تبدأ بنقطتين ":"، باسم وسمٍ (tag) أو محدِّد آخر وإلا سيُسبق بالمحدِّد العام "*" بشكل ضمني. بعبارة أخرى، استعمال المحدِّد بالشكل ‎$( ":radio" )‎ يكافئ تمامًا ‎$( "*:radio" )‎، لذا يجب استعمال ‎$( "input:radio" )‎ مثلًا عوضًا عن ذلك.

لتحديد مجموعة من الأزرار المترابطة ذات النوع radio، قد تحتاج إلى استعمال ‎$( "input[name=gender]:radio" )‎.

ملاحظات إضافية

لمَّا كان المحدِّد ‎:radio هو ملحق في مكتبة jQuery  وليس جزءًا من مواصفة CSS، فإنَّ الاستعلامات التي تستعمل ‎:radio لا يمكنها الاستفادة من سرعة الأداء الذي يوفره تابع DOM الأصلي querySelectorAll()‎. للحصول على أداء أفضل في المتصفحات الحديثة، حدِّد العناصر باستعمال محدِّدات CSS الصرفة (pure) ثمَّ استعمل التابع ‎.filter(" :radio ")‎.

أمثلة

إيجاد جميع العناصر <input> التي من النوع radio:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>radio مثالٌ عن استعمال المحدد</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="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio" name="asdf">
  <input type="radio" name="asdf">
  <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:radio" )
  .wrap( "<span></span>" )
  .parent()
    .css({
      background: "yellow",
      border: "3px red solid"
    });
 
$( "div" )
  .text( "For this type jQuery found " + input.length + "." )
  .css( "color", "red" );
 
// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});
</script>
 
</body>
</html>

مصادر