जांचें और अनचेक इनपुट Jquery

Question

के साथ केवल एक बार काम करते हैं I तालिका के शीर्ष में एक चेकबॉक्स पर क्लिक करके सभी चेकबॉक्स को चेक/अनचेक करने का प्रयास कर रहा हूं। पहले इनपुट में विशेषता जोड़ें क्लिक करें, दूसरा अनचेक करें। यह केवल एक बार काम करता है। फ़ायरफ़ॉक्स और क्रोम पर परीक्षण। एट्रिब्यूट्स बदलते रहते हैं, लेकिन यह पृष्ठ में नहीं दिखाया गया है। मैं इसे केवल ब्राउज़र डीबगर में देखता हूं।

<table> 
    <thead> 
     <tr> 
      <th><input type="checkbox" /></th> 
      <th>#</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="checkbox" /></td> 
      <td>1</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" /></td> 
      <td>2</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" /></td> 
      <td>3</td> 
     </tr> 
    </tbody> 
</table> 

<script type="text/javascript"> 
$(function() { 
    $('th input[type="checkbox"]').click(function(){ 
     if ($(this).is(':checked')) 
      $('td input[type="checkbox"]').attr('checked', 'checked'); 
     else 
      // $('td input[type="checkbox"]').attr('checked', false); 
      $('td input[type="checkbox"]').removeAttr('checked'); 
    }) 
}); 
</script> 

नमूना http://jsfiddle.net/aJhm9/

Answer 1

उपयोग के बजाय गुण

$(function() { 
    $('th input[type="checkbox"]').click(function(){ 
     if ($(this).is(':checked')) 
      $('td input[type="checkbox"]').prop('checked', true); 
     else 
      $('td input[type="checkbox"]').prop('checked', false); 
    }) 
}); 

http://jsfiddle.net/aJhm9/2/

Answer 2

.attr() एक तत्व डिफ़ॉल्ट स्थिति न केवल अपने को लाइव राज्य उपयोग .prop() को संशोधित करने, बदलने के लिए के लिए है गुण एक तत्व की जीवित स्थिति।

Answer 3

उपयोग prop() के बजाय attr()

$(function() { 
    $('th input[type="checkbox"]').click(function(){ 
    if ($(this).is(':checked')) 
     $('td input[type="checkbox"]').prop('checked', true); 
    else 
     $('td input[type="checkbox"]').prop('checked', false); 
    }) 
}); 

working fiddle

Answer 4

क्यों इस तरह के एक छोटे से कार्य के लिए jQuery का उपयोग करें? बस अपनी तालिका के शीर्ष पर एक अद्वितीय नाम पर मुख्य चेकबॉक्स की आईडी सेट करें। फिर तालिका में अपने सभी अन्य चेकबॉक्स में एक विशिष्ट कक्षा जोड़ें।

var mainCheckbox = document.getElementById('name_of_ID'); 

if(window.addEventListener) { 
    mainCheckbox.addEventListener('change', togglecheckboxes, false); 
} else { 
    mainCheckbox.attachEvent('onchange', togglecheckboxes); 
} 

function togglecheckboxes(){ 
    var otherCheckboxes = document.getElementsByClassName('name_of_CLASS'); //returns an array 
     for(var i = 0; i < otherCheckboxes.length; i++){ 
      otherCheckboxes[i].checked = mainCheckbox.checked; 
     } 
} 

Answer 5

<script> 
    $('#select_all').click(function() { 
    $(this).closest('form').find(':checkbox').prop('checked' , this.checked ? true : false); 
}) 
</script>