अनचेक चेक करें अन्य चेकबॉक्स के साथ सभी चेकबॉक्स का उपयोग jquery

Question

मैं jquery-1.9.1.js का उपयोग करता हूं, मेरे एचटीएमएल पेज में, यह पहली बार अच्छी तरह से काम करता है।

सिर्फ http://jsfiddle.net/pzCcE/1/

किसी मदद कर सकते हैं मुझे इसे सुधारने के लिए पसंद है?

<table id="tab1"> 
    <input type="checkbox" name="checkAll" id="checkAll">全選 
    <input type="checkbox" name="book" id="book" value="book1">book1 
    <input type="checkbox" name="book" id="book" value="book2">book2 
    <input type="checkbox" name="book" id="book" value="book3">book3 
    <input type="checkbox" name="book" id="book" value="book4">book4 
    <input type="checkbox" name="book" id="book" value="book5">book5</table> 

$(function() { 
    $("#tab1 #checkAll").click(function() { 
     if ($("#tab1 #checkAll").is(':checked')) { 
      $("#tab1 input[type=checkbox]").each(function() { 
       $(this).attr("checked", true); 
      }); 

     } else { 
      $("#tab1 input[type=checkbox]").each(function() { 
       $(this).attr("checked", false); 
      }); 
     } 
    }); 
}); 

Answer 1

बदलें

$(this).attr("checked", true); 

को

$(this).prop("checked", true); 

jsFiddle example

मैं वास्तव में सिर्फ एक और सवाल यह है कि इस के समान था जवाब दे दिया। प्रति .prop() डॉक्स:

.prop() विधि मूल्यों एक समारोह से वापस लौटे का उपयोग कर, या कम से कई तत्वों पर मूल्य निर्धारित करने, गुण-विशेष रूप से कई गुण सेट करते समय का मान सेट करने के लिए एक सुविधाजनक तरीका है एक बार । इसका चयन तब किया जाना चाहिए जब चयनित इंडेक्स, टैगनाम, नोडनाम, नोड टाइप, मालिक डॉक्यूमेंट, डिफॉल्ट चेक, या डिफॉल्ट चयनित। चूंकि jQuery 1.6, इन गुणों को अब .attr() विधि के साथ सेट नहीं किया जा सकता है। उनके पास समान गुण नहीं हैं और केवल गुण हैं।

गुण आमतौर पर बिना क्रमबद्ध HTML विशेषता को बदलकर किसी DOM तत्व की गतिशील स्थिति को प्रभावित करते हैं। उदाहरणों में इनपुट तत्वों की संपत्ति, इनपुट की अक्षम संपत्ति और बटन, या चेकबॉक्स की चेक की गई संपत्ति शामिल है। .prop() विधि को अक्षम करने के लिए इस्तेमाल किया जाना चाहिए और .attr() विधि के बजाय चेक किया गया है। .val() विधि मान प्राप्त करने और सेट करने के लिए उपयोग की जानी चाहिए।

Answer 2

आपको समान नाम वाले कक्षाओं का उपयोग करना चाहिए, आईडी का अद्वितीय होना चाहिए!

<input type="checkbox" name="checkAll" id="checkAll">全選 
<input type="checkbox" name="book" class="book" value="book1">book1 
<input type="checkbox" name="book" class="book" value="book2">book2 
<input type="checkbox" name="book" class="book" value="book3">book3 
<input type="checkbox" name="book" class="book" value="book4">book4 
<input type="checkbox" name="book" class="book" value="book5">book5</table> 

$(function() { 
    $("#checkAll").click(function() { 
     if ($("#checkAll").is(':checked')) { 
      $(".book").prop("checked", true); 
     } else { 
      $(".book").prop("checked", false); 
     } 
    }); 
}); 

Answer 3

बात भी निम्न में j08691 नज़र के जवाब के साथ ..

यह पूरी तरह से क्योंकि एक आईडी परिभाषा से अपने डोम के भीतर अद्वितीय हो गया है #ID #ID की तरह एक चयनकर्ता बनाने के लिए कोई मतलब नहीं है।

<input type="checkbox" name="checkAll" class="checkAll"> 

$("#tab1 .checkAll").click(function() { 

Answer 4

यह भी जोड़े .... के लिए ..... अगर एक चेकबॉक्स (आईडी: पुस्तक) अचयनित है मतलब है कि यह मुख्य चेक बॉक्स (आईडी: checkAll) का कारण होगा नहीं चुना जाता होने की

$("#tab1 #book").click(function() { 
    if($('#book').is(':checked')) 
    { 
    $("#checkAll").prop("checked", false);   
    } 
}); 

Answer 5

$("input[name='select_all_photos']").click(function() { 
     var checked = $(this).is(':checked'); 
     $("input[name^='delete_']").each(function() { 
      $(this).prop("checked", checked); 
     }); 
    }); 

यदि कोई कथन करने से परेशान न हों।

Answer 6

चूंकि ओपी को अन्य चेकबॉक्स id=全選 के आधार पर सभी चेकबॉक्स अनचेक करने की आवश्यकता होती है।

समाधान जो @ j08691 ऊपर प्रदान किया गया है वह अच्छा है लेकिन इसमें एक चीज़ की कमी है और यही है, समाधान id=全選 चेकबॉक्स को अनचेक नहीं करता है जब सूची में कोई अन्य चेकबॉक्स अनचेक हो जाता है।

तो मैं id=全選 चेकबॉक्स के आधार पर सभी चेकबॉक्सों को चेक/अनचेक करता हूं और यदि कोई अन्य चेकबॉक्स अनचेक किया गया है तो चेकबॉक्स id=全選 अनचेक हो जाता है। और यदि उपयोगकर्ता मैन्युअल रूप से अन्य सभी चेक बॉक्स पर क्लिक करता है तो रिश्ते को दर्शाने के लिए बॉक्स id=全選 को भी चेक किया जाना चाहिए।

ओपी एक ही आईडी का उपयोग एकाधिक चेकबॉक्स के लिए करता है जो डीओएम के नियमों के खिलाफ है। Element IDs should be unique within the entire document.

---

तो निम्न कोड परिदृश्य के इस प्रकार के सभी पहलुओं को शामिल किया गया।

एचटीएमएल

<table> 
    <tr> 
     <td> 
     <input type="checkbox" name="checkAll" id="checkAll">全選 (ALL) 
     <input type="checkbox" name="book" id="book_1" value="book1">book1 
     <input type="checkbox" name="book" id="book_2" value="book2">book2 
     <input type="checkbox" name="book" id="book_3" value="book3">book3 
     <input type="checkbox" name="book" id="book_4" value="book4">book4 
     <input type="checkbox" name="book" id="book_5" value="book5">book5 
     </td> 
    </tr> 
</table> 

JQuery

$(document).ready(function() { 

    $('#checkAll').click(function() { 
     $('input:checkbox').not(this).prop('checked', this.checked); 
    }); 

    $("[id*=book_]").change(function() { 
     if ($('input[id*=book_][type=checkbox]:checked').length == $('input[id*=book_][type=checkbox]').length) { 
      $('#checkAll').prop('checked', true); 
     } else { 
      $('#checkAll').prop('checked', false); 
     } 
    }); 

}); 

विशेषता चयनकर्ता [नाम * = "मूल्य"]

तत्व के साथ निर्दिष्ट विशेषता का चयन करता है का विवरण एक मूल्य युक्त एक मूल्य ubstring।

तो $('#checkAll') मुझे केवल मूल चेकबॉक्स देता है, जिस पर मैं सभी चेकबॉक्स चेक/अनचेक करता हूं।

और $('[id$=book_]') माता-पिता (全 選) चेकबॉक्स को छोड़कर मुझे सभी चेकबॉक्स लौटाता है। फिर अभिभावक चेकबॉक्स के आधार पर मैं अन्य सभी चेकबॉक्स को चेक/अनचेक करता हूं।

---

मैं भी तो दूसरे माता पिता चेक बॉक्स की लंबाई (全 選) चेकबॉक्स, जाँच करता है अन्य सभी चेक बॉक्स फिर जांच रहे हैं, तो मैं माता-पिता (全 選) चेकबॉक्स को चेक। तो यह सभी संभावित स्थिति की जांच करने का तरीका है और किसी भी परिदृश्य को कभी याद नहीं करता है।

Demo working JSFiddle here.

Answer 7

मैं सिर्फ @ j08691 जवाब

$("#checkAll").click(function() { 
 
     var allChecked = $(this); 
 
     $("#tab1 input[type=checkbox]").each(function() { 
 
     $(this).prop("checked", allChecked.is(':checked')); 
 
     }) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tab1"> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" name="checkAll" id="checkAll">Select all 
 
     <input type="checkbox" name="book" id="book" value="book1">book1 
 
     <input type="checkbox" name="book" id="book" value="book2">book2 
 
     <input type="checkbox" name="book" id="book" value="book3">book3 
 
    </td> 
 
    </tr> 
 
</table>

Answer 8

सबसे तेज़ तरीका सरल बना दिया है। और बचाने के कुछ पंक्तियाँ

$(".ulPymnt input[type=checkbox]").each(function(){     
     $(this).prop("checked", !$(this).prop("checked"))     
    }) 

Answer 9

`change click to ch $("#checkAll").click(); to $("#checkAll").change(); 

> Blockquote 

$(function() { 
$("#checkAll").change(function() { 
    if ($("#checkAll").is(':checked')) { 
    $(".book").prop("checked", true); 
    } else { 
    $(".book").prop("checked", false); 
    } 
}); 
});`