如果複選框是檢查並有價值做某事

Question

首先（像往常一樣）感謝您閱讀我的問題。我正在嘗試編寫一個簡單的jQuery腳本，它在checked時顯示element，並在未檢查時隱藏此element。我在這裏搜索了論壇，還有很多像我這樣的問題。但似乎沒有爲我工作。

下面是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> 

這裏是我的腳本：

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

這工作，出於某種原因。但只限於值爲spelmaker的元素。所以我認爲我做錯了什麼。然後我檢查了檢查員和所有我的li input元素現在有valuespelmaker。

我真正想要的是要具備以下條件：

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

任何人，有一個片段或者有什麼傷害d幫我？提前致謝！

Answer 1

它可以幫助你。

迭代每個複選框並控制是否檢查。並使用$(".sf-field-post-meta-type_"+$(this).val())獲得目標div。初始化時僅檢查一個。

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

在這裏你去用一個例子液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>

我已經使用jQuery的切換的代替隱藏/顯示

Answer 3

，因爲我可以知道你想獲取當前點擊的值。

在這種情況下，我會使用jQuery

例

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

挑click()功能此實施例是基於只具有「spelmaker」是或不檢查基於單擊。

Answer 4

檢查下面的工作片段。希望它爲你

本例是有幫助的名義價值checked和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>