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 for this：

$(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-icons。在.food-icons中包装.iconname

您还错过了$ .css选择器的结束括号。

＆＃13;

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

＆＃13;

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

＆＃13;

使用prop（）从另一个div使用jquery检查复选框

1 个答案: