Wenn Kontrollkästchen aktiviert ist und Wert hat etwas tun

Question

Zuerst (wie immer) danke für die Zeit, um meine Frage zu lesen. Ich versuche, ein einfaches jQuery-Skript zu schreiben, das eine element zeigt, wenn es checked ist und dieses element ausblendet, wenn es nicht überprüft wird. Ich habe hier in den Foren gesucht und es gibt viele Fragen wie meine. Aber nichts schien für mich zu funktionieren. Hier

ist die HTML:

<li class="sf-level-0 sf-item-20" data-sf-count="38" data-sf-depth="0"> 
    <input class="sf-input-checkbox" type="checkbox" value="spelmaker" name="_sft_functie[]" id="sf-input-6cf65fe1fd48f4322e62b46c3ac4219b"> 
    <label class="sf-label-checkbox" for="sf-input-6cf65fe1fd48f4322e62b46c3ac4219b">Spelmaker<span class="sf-count">(38)</span></label> 
</li> 
<li class="sf-level-0 sf-item-27" data-sf-count="9" data-sf-depth="0"> 
    <input class="sf-input-checkbox guideLinr-element-highlight" type="checkbox" value="spelmaker" name="_sft_functie[]" id="sf-input-95c8e5259c89324d9b3c9495b808f0a6"> 
    <label class="sf-label-checkbox" for="sf-input-95c8e5259c89324d9b3c9495b808f0a6">Workshop<span class="sf-count">(9)</span></label> 
</li> 

Hier ist mein Skript:

if($(".sf-input-checkbox").val('spelmaker').is(':checked')) 
    $('.sf-field-post-meta-type_workshop').hide(); 
else 
    $('.sf-field-post-meta-type_workshop').show(); 

Dies funktioniert aus irgendeinem Grund. ABER nur für das Element mit dem Wert spelmaker. Also dachte ich, ich hätte etwas falsch gemacht. Dann überprüfte ich den Inspektor und alle meine li input Elemente haben die valuespelmaker jetzt.

Was ich wirklich will nach dem haben:

HTML:

<li class="sf-level-0 sf-item-20" data-sf-count="38" data-sf-depth="0"> 
    <input class="sf-input-checkbox" type="checkbox" value="spelmaker" name="_sft_functie[]" id="sf-input-6cf65fe1fd48f4322e62b46c3ac4219b"> 
    <label class="sf-label-checkbox" for="sf-input-6cf65fe1fd48f4322e62b46c3ac4219b">Spelmaker<span class="sf-count">(38)</span></label> 
</li> 
<li class="sf-level-0 sf-item-27" data-sf-count="9" data-sf-depth="0"> 
    <input class="sf-input-checkbox guideLinr-element-highlight" type="checkbox" value="workshop" name="_sft_functie[]" id="sf-input-95c8e5259c89324d9b3c9495b808f0a6"> 
    <label class="sf-label-checkbox" for="sf-input-95c8e5259c89324d9b3c9495b808f0a6">Workshop<span class="sf-count">(9)</span></label> 
</li> 

SCRIPT:

if($(".sf-input-checkbox").**WITH**->val('spelmaker').is(':checked')) 
    $('.sf-field-post-meta-type_workshop').hide(); 
else 
    $('.sf-field-post-meta-type_workshop').show(); 

UND:

if($(".sf-input-checkbox").**WITH**->val('workshop').is(':checked')) 
     $('.sf-field-post-meta-type_spelmaker').hide(); 
    else 
     $('.sf-field-post-meta-type_spelmaker').show(); 

Jeder, der einen Ausschnitt hat oder etwas, was das tun würde Hilf mir? Danke im Voraus!

Answer 1

Es könnte Ihnen helfen.

Iterieren Sie alle Kontrollkästchen und steuern Sie, ob die Prüfung aktiviert ist oder nicht. Und erhalte das Ziel div mit $(".sf-field-post-meta-type_"+$(this).val()). Dies überprüft nur einen beim Initialisieren.

$('input[type="checkbox"]').each(function(){ 
 
    if(this.checked){ 
 
     $(".sf-field-post-meta-type_"+$(this).val()).hide(); 
 
    }else { 
 
     $(".sf-field-post-meta-type_"+$(this).val()).show(); 
 
    } 
 
});

<script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
 
<li class="sf-level-0 sf-item-20" data-sf-count="38" data-sf-depth="0"> 
 
    <input class="sf-input-checkbox" type="checkbox" value="spelmaker" name="_sft_functie[]" id="sf-input-6cf65fe1fd48f4322e62b46c3ac4219b"> 
 
    <label class="sf-label-checkbox" for="sf-input-6cf65fe1fd48f4322e62b46c3ac4219b">Spelmaker<span class="sf-count">(38)</span></label> 
 
</li> 
 
<li class="sf-level-0 sf-item-27" data-sf-count="9" data-sf-depth="0"> 
 
    <input class="sf-input-checkbox guideLinr-element-highlight" type="checkbox" checked value="workshop" name="_sft_functie[]" id="sf-input-95c8e5259c89324d9b3c9495b808f0a6"> 
 
    <label class="sf-label-checkbox" for="sf-input-95c8e5259c89324d9b3c9495b808f0a6">Workshop<span class="sf-count">(9)</span></label> 
 
</li> 
 

 
<div class="sf-field-post-meta-type_spelmaker"> 
 
type_spelmaker 
 
</div> 
 
<div class="sf-field-post-meta-type_workshop"> 
 
type_workshop 
 
</div>

Answer 2

Hier gehen Sie mit einem Beispiel Lösung https://jsfiddle.net/tbL6vuyp/

$('input[type="checkbox"]').change(function(){ 
 
\t $('div').toggle(); 
 
});

div{ 
 
    height: 100px; 
 
    width: 100px; 
 
    background: blue; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" />Try me!!! 
 

 
<br/> 
 
<br/> 
 

 
<div> 
 

 
</div>

I jQuery Toggle statt hide verwendet haben/zeigen

Answer 3

Wie ich konnte verstehen, Sie wollen Erhalte den aktuell angeklickten Wert.

In diesem Fall würde ich die click() Funktion wählen mit jQuery

Beispiel

// So we check on checkbox on click 
 
$('input[type="checkbox"]').on("click", function() { 
 
    // Here we check wheter checkbox is checked 
 
    // So we don't get anything back on unclick 
 
    // We use $(this) because we want the current checked checkboxs information 
 
    if($(this).is(":checked")){ 
 
     // This will return the currently clicked checkbox value 
 
     var val = $(this).val(); 
 
     
 
     //Now we can do the check if the value is spelmaker 
 
     if(val === "spelmaker"){ 
 
     console.log("You picked spelmaker"); 
 
     } else { 
 
     console.log("Why did you NOT pick spelmaker"); 
 
     } 
 
     
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="sf-level-0 sf-item-20" data-sf-count="38" data-sf-depth="0"> 
 
    <input class="sf-input-checkbox" type="checkbox" value="spelmaker" name="_sft_functie[]" id="sf-input-6cf65fe1fd48f4322e62b46c3ac4219b"> 
 
    <label class="sf-label-checkbox" for="sf-input-6cf65fe1fd48f4322e62b46c3ac4219b">Spelmaker<span class="sf-count">(38)</span></label> 
 
</li> 
 
<li class="sf-level-0 sf-item-27" data-sf-count="9" data-sf-depth="0"> 
 
    <input class="sf-input-checkbox guideLinr-element-highlight" type="checkbox" value="workshop" name="_sft_functie[]" id="sf-input-95c8e5259c89324d9b3c9495b808f0a6"> 
 
    <label class="sf-label-checkbox" for="sf-input-95c8e5259c89324d9b3c9495b808f0a6">Workshop<span class="sf-count">(9)</span></label> 
 
</li>

Dieses Beispiel basiert auf nur mit "spelmaker" ist oder geprüft wird, nicht auf klicken.

Answer 4

Überprüfen Sie das Arbeits-Snippet unten.hoffen, seine hilfreich für Sie

Dieses Beispiel ist Auftrag der Wert checked und uncheked

$(document).ready(function() { 
 

 

 
$(".sf-input-checkbox").change(function(){ 
 
//var checkVal = $(".sf-input-checkbox:checked").val(); 
 
var val =$(this).val(); 
 
    if(this.checked){ 
 
    if(val == "spelmaker"){ 
 
    $(".sf-field-post-meta-type_spelmaker").show(); 
 
    } 
 
    
 
    else if(val == "workshop"){ 
 
    $(".sf-field-post-meta-type_workshop").show(); 
 
    
 
    } 
 
    } 
 
    else{ 
 
    if(val == "spelmaker"){ 
 
    $(".sf-field-post-meta-type_spelmaker").hide(); 
 
    
 
    } 
 
    
 
    else if(val == "workshop"){ 
 
    $(".sf-field-post-meta-type_workshop").hide(); 
 
    
 
    
 
    } 
 
    } 
 
    
 
    
 
    
 
}); 
 

 
});

.sf-field-post-meta-type_spelmaker{ 
 
min-height:100px; 
 
background:red; 
 
display:none; 
 
} 
 
.sf-field-post-meta-type_workshop{ 
 
min-height:100px; 
 
background:green; 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
<li class="sf-level-0 sf-item-20" data-sf-count="38" data-sf-depth="0"> 
 
    <input class="sf-input-checkbox" type="checkbox" value="spelmaker" name="_sft_functie[]" id="sf-input-6cf65fe1fd48f4322e62b46c3ac4219b"> 
 
    <label class="sf-label-checkbox" for="sf-input-6cf65fe1fd48f4322e62b46c3ac4219b">Spelmaker<span class="sf-count">(38)</span></label> 
 
</li> 
 
<li class="sf-level-0 sf-item-27" data-sf-count="9" data-sf-depth="0"> 
 
    <input class="sf-input-checkbox guideLinr-element-highlight" type="checkbox" value="workshop" name="_sft_functie[]" id="sf-input-95c8e5259c89324d9b3c9495b808f0a6"> 
 
    <label class="sf-label-checkbox" for="sf-input-95c8e5259c89324d9b3c9495b808f0a6">Workshop<span class="sf-count">(9)</span></label> 
 
</li> 
 
</ul> 
 
<div class="sf-field-post-meta-type_spelmaker">spelmaker</div> 
 
<div class="sf-field-post-meta-type_workshop">workshop</div>