Wie bekomme ich checkbox innen in div mit jquery?

Question

Ich habe eine Liste von Kontrollkästchen in einem div einige überprüft werden. Ich möchte Hintergrundfarbe grün von Div ändern, wenn Kontrollkästchen aktiviert ist.

Und auf nicht markierten Kontrollkästchen Hintergrundfarbe sollte grau sein.

HTML-Code:

<div class="row"> 
    <label> 
     <div class="col s3" style="padding:10px" id="div39"> 
      <div> 
       <input type="checkbox" name="chk39" value="39" checked=""> 
       <span>Featured Project</span> 
      </div> 
     </div> 
    </label> 
    <label> 
     <div class="col s3" style="padding:10px" id="div40"> 
      <div> 
       <input type="checkbox" name="chk40" value="40"> 
       <span>Specials/Discounts</span> 
      </div> 
     </div> 
    </label> 
</div> 

JQuery-Code:

var check = 1; 
    $('div').find('input[type=checkbox]').click(function(event) { 
     var val = $(this).val(); 
     if(check==1) 
     { 
      $('#div'+val).css({'background-color': 'lightgreen'}); 
      check=0; 
     }else{ 
      $('#div'+val).css({'background-color': 'lightgray'}); 
      check=1; 
     } 
    }); 

$(document).ready(function($) { 
     var selected = []; 
     $('input[type=checkbox] :checked').each(function() { 
      alert('asd'); 
      selected.push($(this).attr('value')); 
     }); 
}); 

Answer 1

• Verwenden .closest das nächste Element mit angegebenem Selektor zu finden.
• Verwendung .change Zuhörers über check-box Elemente als click
• Verwendung .change()change-handler zunächst aufzurufen.

Sehen Sie sich auch Number(this.checked), wird es 0 wenn this.checked ==> false oder anders sein.

$('div').find('input[type=checkbox]').change(function(event) { 
 
    var color = ['lightgreen', 'lightgray']; 
 
    var index = Number(this.checked); 
 
    $(this).closest('.s3').css({ 
 
    'background-color': color[index] 
 
    }); 
 
}).change(); 
 

 
$(document).ready(function($) { 
 
    var selected = []; 
 
    $('input[type=checkbox] :checked').each(function() { 
 
    selected.push($(this).attr('value')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="row"> 
 
    <label> 
 
    <div class="col s3" style="padding:10px" id="div39"> 
 
     <div> 
 
     <input type="checkbox" name="chk39" value="39" checked=""> 
 
     <span>Featured Project</span> 
 
     </div> 
 
    </div> 
 
    </label> 
 
    <label> 
 
    <div class="col s3" style="padding:10px" id="div40"> 
 
     <div> 
 
     <input type="checkbox" name="chk40" value="40"> 
 
     <span>Specials/Discounts</span> 
 
     </div> 
 
    </div> 
 
    </label> 
 
</div>

Answer 2

können Sie das übergeordnete div mit dem nächsten() -Methode finden.

$('div').find('input[type=checkbox]').click(function(event) { 
    var val = $(this).val(); 
    var parent = $(this).closest(".col"); 
    if(this.checked) { 
    parent.css({ 
     'background-color': 'lightgreen' 
    }); 
    } else { 
    parent.css({ 
     'background-color': 'lightgray' 
    }); 
    } 
}); 

Fiddle

Answer 3

Dies ist, wie ich es tun würde:

$("input[type='checkbox']").click(function() { 
    if ($(this).prop("checked") === true) { 
    $(this).closest(".col").css("background-color", "#36ac3b"); 
    } else { 
    $(this).closest(".col").css("background-color", "#999"); 
    } 
}); 

Here is the JSFiddle demo

Answer 4

$('div').find('input[type=checkbox]').click(function(event) { 
     if($(this).is(':checked')) 
     { 
    $(this).closest('div').css({'background-color': 'lightgreen'}); 
     } 
     else 
     { 
     $(this).closest('div').css({'background-color': 'lightgray'}); 
     } 
    }); 

$(document).ready(function($) { 
     var selected = []; 
     $('input[type=checkbox]').not(':checked').closest('div').css({'background-color': 'lightgray'}); 
     $('input[type=checkbox]:checked').closest('div').css({'background-color': 'lightgreen'}); 

}); 

Im Folgenden finden Sie die aktualisierte Geige

https://jsfiddle.net/cc3q2axr/