2009-11-16 14 views
5

मेरे पास सी # में दो नेस्टेड रिपियटर्स हैं। बाहरी में कुछ समूहीकरण जानकारी होती है और आंतरिक में एक्सबॉक्स चेकबॉक्स के साथ एक तालिका होती है।JQuery - वर्तमान तालिका के भीतर सभी चेकबॉक्स का चयन करें केवल

तो मेरे पास वाई टेबल की संख्या होगी। प्रत्येक तालिका के शीर्ष पर एक चेक बॉक्स होगा (साथ ही प्रत्येक पंक्ति पर एक चेकबॉक्स)। मैं जो करना चाहता हूं वह प्रत्येक तालिका के शीर्ष पर चेकबॉक्स से एक ही तालिका में सभी चेक बॉक्स का चयन करने में सक्षम है।

इस प्रकार मैं एक ही बार में सभी चेक बॉक्स का चयन कर सकते हैं:

$(document).ready(function() { 
     $("#checkboxflipflop").click(function() { 
      var checked_status = this.checked; 
      $(".storecheckbox input").each(function() { 
       this.checked = checked_status; 
      }); 
     }); 
    }); 

मैं सिर्फ शीर्ष पर चेकबॉक्स को समझ नहीं सकता मौजूदा तालिका में चयन को सीमित करने के लिए कैसे, (में से प्रत्येक तालिका में है वें पंक्ति)।

धन्यवाद

संपादित करें .... खेद है कि हम JQuery के 1.26 और यकीन नहीं कर रहे हैं अगर मैं सब पर हमें ऊपर ले जाने के लिए अनुमति दी हूँ उल्लेख करना भूल गया। जिसका अर्थ है "निकटतम" वहां नहीं है।

उत्तर

13

निम्नलिखित की तरह कुछ चाहिए यह करने के लिए

$('th input:checkbox').click(function(e) { 

var table = $(e.target).closest('table'); 
$('td input:checkbox', table).attr('checked', e.target.checked); 

}); 

यहां एक Working Demo एक अन्य तालिका में घोंसले दो टेबलों के साथ (अर्थात् भयानक मैं स्वीकार करूंगा)/संपादन यूआरएल में जोड़े कोड

संपादित करें देखने के लिए:

के बाद आप अभी भी jQuery 1.2.6 का उपयोग कर रहे, closest()

$('th input:checkbox').click(function(e) { 

var table = $(e.target).parents('table:first'); 
$('td input:checkbox', table).attr('checked', e.target.checked); 

}); 
+0

+1। – Boldewyn

+0

इसका मतलब यह नहीं होगा कि किसी भी चेकबॉक्स को जांचना (केवल मास्टर ही नहीं) उस तालिका में अन्य सभी की जांच करेगा? –

+0

नहीं, क्लिक इवेंट हैंडलर बाध्यकारी चयनकर्ता चेकबॉक्स पर लागू होता है जो * 'तत्वों के * वंशज * हैं।मैंने इसका अर्थ यह बताया है कि अन्य सभी चेकबॉक्स प्रत्येक तालिका –

0
$(this).closest("table").find("input:checkbox") 

नोट: ऐसा लगता है कि सभी का चयन-ऑल-इन-यह-टेबल चेक बॉक्स एक ही id है, id पृष्ठ के भीतर अद्वितीय होना चाहिए, आप के बजाय एक वर्ग का उपयोग करना चाहिए। (या बस table th input)

5

इसलिए प्रत्येक तालिका में "सभी जांचें" चेकबॉक्स है, है ना? इसे .checkall का वर्ग क्यों न दें? तो फिर तुम इस (untested) कर सकता है:

$('.storecheckbox input:nth-child(1)').click` 

अर्थ, "जब पहली इनपुट:

$('.checkall').click(function(){ 
    var checked_status = this.checked; 
    $(this).closest('table').find('input:checkbox').each(function(){ 
    this.checked = checked_status; 
    }); 
}) 

वैकल्पिक रूप से, आप .checkall वर्ग का उपयोग नहीं करना चाहते हैं तो आपको एक चयनकर्ता की तरह उपयोग करें साथ वर्ग .storecheckbox क्लिक किया जाता है एक तत्व के अंदर ... "

2

के बजाय parents() का उपयोग यहाँ स्निपेट जो पृष्ठ के आपके वर्तमान डिजाइन के अनुसार काम करना चाहिए। संदर्भ का उपयोग करने के लिए

// iterate over all the tables in the page 
$("table").each(function() { 
    // attach a click event on the checkbox in the header in each of table 
    $(this).find("th:first input:checkbox").click(function() { 
     var val = this.checked; 
     // when clicked on a particular header, get the reference of the table & hence all the rows in that table, iterate over each of them. 
     $(this).parents("table").find("tr").each(function() { 
      // access the checkbox in the first column, and updates its value. 
      $(this).find("td:first input:checkbox")[0].checked = val; 
     }); 
    }); 
}); 
संबंधित मुद्दे