Jquery तालिका

में सभी चेकबॉक्स का चयन करें मेरे पास एक स्क्रिप्ट है जो किसी तालिका में सभी चेकबॉक्स को जांचनी चाहिए। यह उन्हें पहली बार जांचता है, यह उसके बाद उन्हें अनचेक करता है। हालांकि, जब मैं उन्हें दोबारा जांचने की कोशिश करता हूं तो कुछ भी नहीं होता है।Jquery तालिका

jQuery:

$('#selectAll').click(function(e){ 
    var table= $(e.target).closest('table'); 
    $('td input:checkbox',table).attr('checked',e.target.checked); 
});

HTML:

<table> 
    <tr> 
     <th> 
      <input type="checkbox" id="selectAll" /> 
     </th> 
     <th> 
      hi! 
     </th> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" id="1"/> 
     </td> 
     <td> 
      hi! 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" id="2"/> 
     </td> 
     <td> 
      hi! 
     </td> 
    </tr> 
</table>

यहाँ व्यवहार का एक बेला है:

http://jsfiddle.net/EEJrU/

यह एक बार क्लिक किया जा रहा करने के बाद क्यों काम नहीं कर रहा?

स्रोत

2013-10-03 Snowburnt

यह रूप में अपने कोड के साथ काम करता है यह है कि यदि आप 1.10.1 –

आप .attr()

$('#selectAll').click(function(e){ 
    var table= $(e.target).closest('table'); 
    $('td input:checkbox',table).prop('checked',this.checked); 
});

डेमो के बजाय .prop() उपयोग करने की आवश्यकता: Fiddle

Attributes vs. Properties

स्रोत

2013-10-03 16:52:37

के बजाय JQuery 1.7.2 का उपयोग करते हैं तो मुझे पता था कि यह कुछ आसान था! धन्यवाद! – Snowburnt

अच्छा, terse, पोर्टेबल कोड। +1 ध्यान दें कि क्लिक ईवेंट के बाद चेक किए गए "सभी का चयन करें" चेकबॉक्स को रखने में मुझे परेशानी हो रही थी, इसलिए मुझे फ़ंक्शन में निम्न पंक्ति जोड़नी थी: e.stopPropagation(); – wloescher

अन्य सभी चेक बॉक्स पर एक परिवर्तन ईवेंट ट्रिगर करने के लिए आपको लाइन के अंत में .change() जोड़ना चाहिए। जैसा कि: $ ('टीडी इनपुट: चेकबॉक्स', टेबल) .prop ('चेक', this.checked) .change(); – Luk6e

यह प्रोप के बीच अंतर पर उपयोगी हो सकता है() और attr()। इस लेख .prop() vs .attr() में इस लाइन नोट:।

"विशेषता मान डिफ़ॉल्ट के बजाय वर्तमान दिखाई राज्य (आईई के कुछ पुराने संस्करण को छोड़कर, इस प्रकार अभी भी कठिन चीजों को बनाने) को दर्शाता है विशेषता आप के बारे में है कि क्या कुछ भी नहीं बताता है पेज पर चेकबॉक्स चेक किया गया है। "

तो सामान्य रूप से, attr() के बजाय prop() का उपयोग करें।

स्रोत

2013-10-03 17:16:35 shenge86

<HTML> 
    <HEAD> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

    </HEAD> 
    <BODY> 

    <table border="1"> 
    <tr> 
     <th><input type="checkbox" id="selectall"/></th> 
     <th>Cell phone</th> 
     <th>Rating</th> 
    </tr> 
    <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td> 
     <td>BlackBerry Bold 9650</td> 
     <td>2/5</td> 
    </tr> 
    <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td> 
     <td>Samsung Galaxy</td> 
     <td>3.5/5</td> 
    </tr> 
    <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td> 
     <td>Droid X</td> 
     <td>4.5/5</td> 
    </tr> 
    <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td> 
     <td>HTC Desire</td> 
     <td>3/5</td> 
    </tr> 
    <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td> 
     <td>Apple iPhone 4</td> 
     <td>5/5</td> 
    </tr> 
    </table> 

    </BODY> 
    </HTML> 




<script type="text/javascript" charset="utf-8"> 
     $(document).ready(function() { 
      oTable = $('#datatable').dataTable({ 
       "bJQueryUI": true, 
       "sPaginationType": "full_numbers" 
      }); 

      $("#selectall").click(function() { 
       var checkAll = $("#selectall").prop('checked'); 
        if (checkAll) { 
         $(".case").prop("checked", true); 
        } else { 
         $(".case").prop("checked", false); 
        } 
       }); 

      $(".case").click(function(){ 
       if($(".case").length == $(".case:checked").length) { 
        $("#selectall").prop("checked", true); 
       } else { 
        $("#selectall").prop("checked", false); 
       } 

      }); 
     }); 




    </script>

स्रोत

2014-06-04 05:14:56

ऐसा लगता है कि यह काम करेगा, लेकिन यह अत्यधिक है। यह निर्धारित करने के लिए कि क्या आप सभी बक्से की जांच करना चाहते हैं या नहीं, आपको चुनने के लिए केवल सभी बक्से की आवश्यकता है, आपको एक बयान देने की आवश्यकता नहीं है। मुझे ऐसा लगता है कि अगर किसी ने स्वयं को सभी का चयन किया है तो सभी को चेक की गई स्थिति को संशोधित करने के लिए चेक है। – Snowburnt

सरल jQuery समाधान, मुख्य (selectAll) चेकबॉक्स के लिए मेज के अंदर की जाँच की आदानों का पता लगाने, और राज्य में परिवर्तन के साथ:

<table class="table"> 
    <thead> 
     <tr> 
      <th> 
       <div class="checkbox"> 
        <input type="checkbox" id="selectAll"> 
        <label for="selectAll"></label> 
       </div> 
      </th> 
      <th>Email</th> 
      <th>Join date <i class="arrow bottom"></i></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="active"> 
      <td> 
       <div class="checkbox"> 
        <input type="checkbox" id="tr-checkbox1"> 
        <label for="tr-checkbox1"></label> 
       </div> 
      </td> 
      <td>[email protected]</td> 
      <td>21 Oct, 2016 at 11:29 pm</td> 
     </tr> 
     <tr> 
      <td> 
       <div class="checkbox"> 
        <input type="checkbox" id="tr-checkbox2"> 
        <label for="tr-checkbox2"></label> 
       </div> 
      </td> 
      <td>[email protected]</td> 
      <td>21 Oct, 2016 at 11:29 pm</td> 
     </tr> 
    </tbody> 
</table>  

$(document).ready(function() { 
    var $selectAll = $('#selectAll'); // main checkbox inside table thead 
    var $table = $('.table'); // table selector 
    var $tdCheckbox = $table.find('tbody input:checkbox'); // checboxes inside table body 
    var $tdCheckboxChecked = []; // checked checbox arr 

    //Select or deselect all checkboxes on main checkbox change 
    $selectAll.on('click', function() { 
     $tdCheckbox.prop('checked', this.checked); 
    }); 

    //Switch main checkbox state to checked when all checkboxes inside tbody tag is checked 
    $tdCheckbox.on('change', function(){ 
     $tdCheckboxChecked = $table.find('tbody input:checkbox:checked');//Collect all checked checkboxes from tbody tag 
     //if length of already checked checkboxes inside tbody tag is the same as all tbody checkboxes length, then set property of main checkbox to "true", else set to "false" 
     $selectAll.prop('checked', ($tdCheckboxChecked.length == $tdCheckbox.length)); 
    }) 
});

डेमो: jsfiddle

स्रोत

2017-01-07 08:12:02 ykosinets

Jquery तालिका

उत्तर

संबंधित मुद्दे