使用prop檢查複選框使用jquery從另一個div（）

Question

我不知道爲什麼這不起作用。我嘗試了與在某些stackflow解決方案中看到的相同的方式，但仍未獲取圖像以及複選框響應。

<form> 
<div class="col s12"> 
    <div style="display:none"> 
     <label for="Type">Type</label> 
     <input type="hidden" id="Type"> 
     <div class="checkbox"> 
      <input type="checkbox" id="Type1" checked="false" name="Type[]" value="1"> 
      <label for="Type1">Fruits</label> 
     </div> 
     <div class="checkbox"> 
      <input type="checkbox" id="Type2" checked="false" name="Type[]" value="2"> 
      <label for="Type2">Vegetables</label> 
     </div> 
     <div class="checkbox"> 
      <input type="checkbox" id="Type3" checked="false" name="Type[]" value="3"> 
      <label for="Type3">Pulses</label> 
     </div> 
     <div class="checkbox"> 
      <input type="checkbox" id="Type4" checked="false" name="Type[]" value="4"> 
      <label for="Type4">SeaFoods</label> 
     </div> 
    </div> 
    <p>Food types</p> 
    <ul> 
     <li class="unchkd"><span class="food-icons fruit"></span> <span class="iconname">Fruits</span></li> 
     <li class="unchkd"><span class="food-icons vegi"></span> <span class="iconname">Vegetables</span></li> 
     <li class="unchkd"><span class="food-icons pulses"></span> <span class="iconname">Pulses</span></li> 
     <li class="unchkd"><span class="food-icons seaFood"></span> <span class="iconname">Sea Food</span></li> 
    </ul> 
    </div> 
</div> 
</form 

JQuery的這個：

$(document).ready(function(){ 
    $("span.food-icons.fruit").click(function(){ 
     if($(".checkbox #Type1").prop("checked") == false){ 
      $('.checkbox #Type1').prop('checked', true); 
      $("span.food-icons.fruit").css("background-image", "url(images/icons/fruits1.png)"; 
     } 
     else{ 
      $('.checkbox #Type1').prop('checked', false); 
      $("span.food-icons.fruit").css("background-image", "url(images/icons/fruits.png)"; 
     } 
    }); 
}); 

Answer 1

您點擊span.iconname不span.food-圖標。在.food-icons中包裹.iconname

您還缺少您$ .css選擇器上的右括號。

$(document).ready(function(){ 
 
    $(".food-icons.fruit>.iconname").click(function(){ 
 
     console.log("click"); 
 
    if($(".checkbox #Type1").prop("checked") == false){ 
 
      $('.checkbox #Type1').prop('checked', true); 
 
      $("span.food-icons.fruit").css("background-image", "url(images/icons/fruits1.png)"); 
 
     } 
 
     else{ 
 
      $('.checkbox #Type1').prop('checked', false); 
 
      $("span.food-icons.fruit").css("background-image", "url(images/icons/fruits.png)"); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col s12"> 
 
    <div style="display:inherit"> 
 
     <label for="Type">Type</label> 
 
     <input type="hidden" id="Type"> 
 
     <div class="checkbox"> 
 
      <input type="checkbox" id="Type1" checked="false" name="Type[]" value="1"> 
 
      <label for="Type1">Fruits</label> 
 
     </div> 
 
     <div class="checkbox"> 
 
      <input type="checkbox" id="Type2" checked="false" name="Type[]" value="2"> 
 
      <label for="Type2">Vegetables</label> 
 
     </div> 
 
     <div class="checkbox"> 
 
      <input type="checkbox" id="Type3" checked="false" name="Type[]" value="3"> 
 
      <label for="Type3">Pulses</label> 
 
     </div> 
 
     <div class="checkbox"> 
 
      <input type="checkbox" id="Type4" checked="false" name="Type[]" value="4"> 
 
      <label for="Type4">SeaFoods</label> 
 
     </div> 
 
    </div> 
 
    <p>Food types</p> 
 
    <ul> 
 
     <li class="unchkd"><span class="food-icons fruit"> <span class="iconname">Fruits</span></span></li> 
 
     <li class="unchkd"><span class="food-icons vegi"></span> <span class="iconname">Vegetables</span></li> 
 
     <li class="unchkd"><span class="food-icons pulses"></span> <span class="iconname">Pulses</span></li> 
 
     <li class="unchkd"><span class="food-icons seaFood"></span> <span class="iconname">Sea Food</span></li> 
 
    </ul> 
 
    </div> 
 
</div>