如果复选框是选中的并且具有价值，请执行某项操作

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元素现在都具有spelmaker的value 。

我真正想要的是具有以下功能：

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>

脚本：

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

和：

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

有摘要或对我有帮助的人吗？ 提前致谢！

Answer 1

据我了解，您希望获得当前点击的值。

在那种情况下，我将使用jQuery选择click()函数

例

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

本示例基于仅根据点击来检查或不检查“ spelmaker”。

Answer 2

检查下面的工作片段。 希望对您有帮助

此示例代表checked和uncheked checked的值

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

它可能会帮助您。

遍历每个复选框，并控制是否选中。 并使用$(".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 4

在这里，您将获得示例解决方案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> 

我已经使用jQuery Toggle而不是hide / show