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>

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

和

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()函数

示例

＆＃13;

// 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");
      }
      
    }
})

＆＃13;

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

＆＃13;

这个例子是基于＆＃34; spelmaker＆＃34;是否根据点击进行检查。

Answer 2

检查下面的工作代码段。希望对你有所帮助

此示例代表值checked和uncheked

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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 代替隐藏/显示

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

4 个答案: