If checkbox is check and has value do something

Question

First of (like always) thanks for the time to read my question. I'm trying to write a simple jQuery script that shows a element when it's checked and hides this element when it's not checked. I've searched around the forums here, and there's a lot of questions like mine. But non seemed to work for me.

Here is the 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>

Here is my script:

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

This works, for some reason. BUT only on the element with value spelmaker . So I thought I did something wrong. Then I checked the inspector and all my li input elements have the value spelmaker now.

What I really want is to have the following:

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();

AND:

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

Anyone that has a snippet or something that would help me? Thanks in advance!

Answer 1

As I could understand you want to get the currently clicked value.

In that case I would pick the click() function using jQuery

Example

 // 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> 

This example is based on just having "spelmaker" is or is not checked based on click.

Answer 2

Check working snippet below. hope its helpfull for you

This Example is behalf of value checked and 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> 

Answer 3

It might help you.

Iterate every the checkboxs and control whether check or not. And get target div using $(".sf-field-post-meta-type_"+$(this).val()) . This check only one when initialize.

 $('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 4

Here you go with an example solution https://jsfiddle.net/tbL6vuyp/

 $('input[type="checkbox"]').change(function(){ $('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 have used jQuery Toggle instead of hide / show