JQuery चेकबॉक्स मान बदल रहा है लेकिन चेकबॉक्स

Question

के रूप में प्रदर्शित नहीं हो रहा है मेरे पास एक चेकबॉक्स और कुछ टेक्स्ट (जैसे ईमेल के इनबॉक्स) के साथ एक सूची है। जब मैं सूची आइटम (पंक्ति) पर कहीं भी क्लिक करता हूं तो मैं चेकबॉक्स को चेक/अनचेक करना चाहता हूं। मैंने पंक्ति के क्लिक ईवेंट पर निम्नलिखित कोड का उपयोग किया है:

$(this).find(".cbx input").attr('checked', true); 

पहली बार, यह चेक किए गए चेकबॉक्स दिखाता है। लेकिन जब मैं इसे अगली बार चुनता हूं तो चेकबॉक्स का मूल्य एचटीएमएल कोड में चेक किया गया है (मैंने फायरबग के माध्यम से चेक किया है) लेकिन चेकबॉक्स चेक के रूप में प्रदर्शित नहीं होता है।

Answer 1

.attr() साथ

आप का मान सेट डोम पेड़ में एक विशेषता। ब्राउज़र, ब्राउज़र संस्करण और jQuery संस्करण (विशेष रूप से 1.6) के आधार पर, यह हमेशा वांछित प्रभाव नहीं होता है।

.prop() के साथ, आप संपत्ति (इस मामले में, 'चेक स्थिति') में हेरफेर करते हैं। मैं दृढ़ता से, आपके मामले में .prop() उपयोग करने की अनुशंसा तो निम्नलिखित सही ढंग से टॉगल होगा:

$(this).find(".cbx input").prop('checked', true); 

अधिक जानकारी के लिए documentation of .prop() को देखें।

Answer 2

लगभग ठीक है, सिर्फ सच के बजाय 'जाँच' का उपयोग करें:

$(this).find(".cbx input").attr('checked', 'checked'); 

अद्यतन: वैकल्पिक रूप से, आप नए JQuery संस्करणों के साथ इस का उपयोग कर सकते हैं:

$(this).find(".cbx input").prop('checked', true); 

Answer 3

$("[id*='" + value + "'] input").prop('checked', false); 

attr भी काम किया (लेकिन पहली बार केवल) लेकिन prop हमेशा काम करता है।

Answer 4

useing **.prop()** it worked for me ! 

$(document).on("click",".first-table tr",function(e){ 
if($(this).find('input:checkbox:first').is(':checked')) 
{ 
    $(this).find('input:checkbox:first').prop('checked',false); 
}else 
{ 
    $(this).find('input:checkbox:first').prop('checked', true); 
} 
}); 

Answer 5

क्रोम में शुरू में मेरे लिए कुछ भी काम नहीं किया, हालांकि यह मोज़िला में ठीक काम कर रहा था। बाद में पता चला कि कस्टम सीएसएस स्टाइल ने चेकमार्क को दिखाई नहीं दिया है।

Answer 6

आसान, समाधान $ ('xxxxxx') .pop उपयोग करने के लिए ('जाँच', सच) या में झूठी टेस्ट ठीक Jquery 1.11.x है।

चीयर्स

पूर्ण डेमो कोड उदाहरण

उदाहरण: (एक मेज के लिए कोड JavaScript चेकबॉक्स)

function checkswich() { 
     if ($('#checkbox-select').is(':checked') == true) { 
      selectTodo(); 
     } else { 
      deSelectTodo(); 
     } 
    } 
    function selectTodo() { 
     //$('#tabla-data input.ids:checkbox').attr('checked', 'checked'); 
     $('#tabla-data input.ids:checkbox').prop('checked', true); 
    } 
    function deSelectTodo() { 
     //$('#tabla-data input.ids:checkbox').removeAttr('checked', 'checked'); 
     $('#tabla-data input.ids:checkbox').prop('checked', false); 
    } 
    function invetirSelectTodo() { 
     $("#tabla-data input.ids:checkbox").each(function (index) { 
      //$(this).attr('checked', !$(this).attr('checked')); 
      $(this).prop('checked', !$(this).is(':checked')); 
     }); 
    } 

उदाहरण: (एक के लिए कोड एचटीएमएल चेकबॉक्स तालिका)

  <table id="tabla-data" class="table table-striped table-bordered table-hover table-condensed"> 
       <thead> 
        <tr> 
         <th class="text-center" style="width: 5px"><span class="glyphicon glyphicon-check"></span></th> 
         <th>Engine</th> 
         <th><a href="#" class="">Browser</a></th> 
         <th class="td-actions text-center" style="width: 8%;">Acciones</th> 
        </tr> 
       </thead> 
       <tbody id="tabla-data" class="checkbox-data"> 
        <tr> 
         <td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td> 
         <td>#########</td> 
         <td>#######</td> 
         <td class="td-actions text-center"> 
          <?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?> 
         </td> 
        </tr> 
        <tr> 
         <td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td> 
         <td>#########</td> 
         <td>#######</td> 
         <td class="td-actions text-center"> 
          <?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?> 
         </td> 
        </tr> 
        <tr> 
         <td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td> 
         <td>#########</td> 
         <td>#######</td> 
         <td class="td-actions text-center"> 
          <?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?> 
         </td> 
        </tr> 
       </tbody> 
      </table> 

उदाहरण: (कोड ComponentHTML JavaScript का उपयोग)

<form id="form-datos" action="/url/demo/blablaaa" method="post" enctype="multipart/form-data" style="visibility: hidden;" > 
<input type="hidden" name="accion" id="accion"> 

<div class="btn-group"> 
<span class="btn btn-default btn-xs"><input type="checkbox" id="checkbox-select" onclick="checkswich()"></span> 
<button type="button" class="btn btn-default btn-xs dropdown-toggle dropdown-toggle-check" data-toggle="dropdown" aria-haspopup="true" 
     aria-expanded="false"> 
    <span class="caret"></span> 
    <span class="sr-only">Options</span> 
</button> 
<ul class="dropdown-menu"> 
    <li><a href="#" onclick="accion()">Action Demo</a></li> 
    <li role="separator" class="divider"></li> 
    <li><a href="#" onclick="selectTodo()">Select All</a></li> 
    <li><a href="#" onclick="deSelectTodo()">UnSelet All</a></li> 
    <li><a href="#" onclick="invetirSelectTodo()">Inverse Select</a></li> 
</ul> 

Answer 7

यह समाधान मेरे लिए काम नहीं किया (यानी। प्रोप के साथ चेक किए गए राज्य को सेट करना)।

$("#checkbox-reminder").prop("checked", true); 

जबकि अंतर्निहित स्थिति हमेशा सही ढंग से अपडेट होती है, तो प्रदर्शन ठीक से पुनर्निर्मित नहीं होता है।

इसे हल किया जा सकता है।

$("#checkbox-reminder").prop("checked", true).checkboxradio(); 
$('#checkbox-reminder').checkboxradio('refresh'); 

अधिक जानकारी के लिए यह thread देखें।