سؤال

أواجه مشكلات في الحصول على وظيفة تقوم بالنقر فوق جميع مربعات الاختيار المطابقة للبحث.يبدو أن حدث النقر قد تم إطلاقه، ولكن لم يتم تحديد أي مربع اختيار ولا يتم استدعاء myFunc().

إنه يعمل بشكل مثالي عند النقر على كل مربع اختيار يدويًا، ولكن من يريد القيام بذلك باستخدام أكثر من 40 مربع اختيار - وليس المستخدمين.
قد تتساءل لماذا أستخدم div-onclick بدلاً من استخدام مربع اختيار الإدخال مباشرة.وذلك لأنني أريد منح المستخدمين أ أكبر منطقة للنقر عليها من مربع اختيار صغير.

أرغب في تزويد المستخدمين بارتباط تشعبي واحد لتحديد مربعات اختيار متعددة تتطابق مع قيمة (قيم) سمة معينة.

أحتاج إلى حل سريع لأن الوقت ليس لدي.

لغة البرمجة

<div id="container">
<a href="#" onclick="clickAndCheckAllMatch('search for this text');return false;">some text</a>
<div id="*actual_ID*" onclick="myFunc(a, b, c, d);">
  <input type="checkbox" id="book-*actual_ID*" onclick="this.parentNode.click;return false;">
</div>
</div>

شبيبة

function myFunc(a, b, c, d) {
  // does stuff
}
function clickAndCheckAllMatch(value) {
  $('div[onclick*='+value+']').each(function(idx,e){
  $('book-'+this.id).click();
}

يحرر
عندما تغيرت من شعبة ل ملصق ثم لم أضطر إلى تصحيح حالة خانة الاختيار.أ شعبة أو يجب أن يكون لعنصر الكتلة بعض المشكلات هناك.
لقد قمت أيضًا بإزالة النقرة عند النقر من *div*s، مما يعني أنني تمكنت من استهداف مربعات الاختيار مباشرةً ويمكنني تغيير قيم المعرفات الخاصة بها إلى *actual_ID* فقط.

function clickAndCheckAllMatch(value) {
  $('input[onclick*='+value+']').each(function(idx,e){
    // e == this
    $(this)[0].click();
    if ($(this).attr('disabled')) {
      //do nothing
    } else {
      if ($(this).attr('checked')) {
        //do nothing
      } else {
        $(this)[0].click(); // only one checkbox per ID
      }
    }
  });
}
function CheckAll() {
  $('#container input[type=checkbox]:not(:checked)').each(function(idx,e){
    $(this).click(); // notice the difference ?
  });
}
هل كانت مفيدة؟

المحلول

بدلاً من محاولة استخدام الحدث لتغيير قيمة خانة الاختيار ، سأفعل شيئين:

  1. لمنح المستخدمين مساحة كبيرة للنقر ، استخدم أ label العنصر ، وليس أ div. label يتم دعم العناصر مباشرة من قبل المتصفحات ، وليس عليك فعل أي شيء لجعلها تعمل. هناك طريقتان لاستخدامهما:

    <label><input type='checkbox'>Foo</label>
    

    أو

    <input type='checkbox' id='chk1'><label for='chk1'>Foo</label>
    

    السابق لطيف لأنك لست مضطرًا لاستخدام معرفات (التي يجب أن تكون فريدة من نوعها على الصفحة ، لذلك يبدأ في أن تصبح ألمًا) ؛ هذا الأخير لطيف لحالات الترميز حيث لا يمكنك الحصول على input كن طفلاً من label لاي سبب كان.

  2. إذا كنت بحاجة إلى تغيير الحالة في الكود ، فقم بتغيير الحالة مباشرة بدلاً من محاولة تشغيل حدث ما. على سبيل المثال ، إذا كنت أرغب في تغيير حالة مربع الاختيار chk1, ، أنا فقط أفعل هذا:

    $('#chk1').attr("checked", true); // or false, of course
    

    ... أو لمسح جميع مربعات الاختيار في حاوية (مفيدة لتلك الروابط "الكل" أو "لا شيء"):

    $('#container input[type=checkbox]').attr("checked", false); // or true, of course
    

نصائح أخرى

لقد قمت للتو بحل مشكلة كهذه، تتعلق بمعالج أحداث مربع الاختيار الذي تم تقديمه بواسطة ASP.net مثل كود js في سمة onclick، والتي أردت تشغيلها.حاولت أولاً استدعاء حدث النقر jQuery بشكل صريح، ولكن بعد فترة أدركت أنني لن أنجح بهذه الطريقة.لذا فإن الحل الذي نجح بالنسبة لي هو:

someOtherObject.click(eval($('input').attr('onclick')));

هتافات.

this.parentNode.click يجب ان يكون this.parentNode.click().

this.parentNode.click هو مجرد كائن الطريقة. استدعائه لن يطلق النار على حدث النقر من DIV. يجب عليك إضافة الأقواس بعد click, ، وإلا فإن الحدث لن يطلق النار.

لمتابعة تعليق Pointy ، استخدم هذا:

$(document).ready(function(){
  $('.theAnchorTagClass').click(function(){
    //Code to check all boxes here or do whatever else you need...
  });
});

ما عليك سوى استبدال شيء من هذا القبيل لأي عنصر تحاول التقاط حدث النقر.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top