javascript - 如果复选框被选中并且有值，则执行某些操作

Question

首先(一如既往)感谢您花时间阅读我的问题。我正在尝试编写一个简单的 jQuery 脚本来显示 element当它checked时并隐藏此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元素有 value spelmaker现在。

我真正想要的是拥有以下内容:

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

也许对你有帮助。

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