Question

我的问题是，当我选中复选框时，div不会切换。由于某些原因，它们没有显示。有人可以找出问题吗？

这是我的html：

<input type="checkbox" id="Check1" value="Value1" name="ranged" onclick="selectOnlyThis(this.id)" class="ranged" /> Ranged
<input type="checkbox" id="Check2" value="Value1" name="meele" onclick="selectOnlyThis(this.id)" class="meele" /> Melee
<input type="checkbox" id="Check3" value="Value1" name="magic" onclick="selectOnlyThis(this.id)" class="magic" /> Magic

<div id="wizards" hidden>
    <img src="/img/chars/char1.png">
    <img src="/img/chars/char2.png">
    <img src="/img/chars/char3.png">
    <img src="/img/chars/char4.png">
    <img src="/img/chars/char5.png">
    <img src="/img/chars/char6.png">
    <img src="/img/chars/char7.png">
    <img src="/img/chars/char8.png">
</div>

这是我的javascript代码：

<script type="text/javascript">
    function selectOnlyThis(id) {
        for (var i = 1;i <= 3; i++)
        {
            document.getElementById("Check" + i).checked = false;
        }
        document.getElementById(id).checked = true;   
    }

    $('.magic').on('click', function(){
        $('#wizards').toggle("fast");
        $('#melees').slideUp('fast');
        $('#rangers').slideUp('fast');
    });
</script>

这就是我要加载的内容

   <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>    
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 1

使用

$('.magic').on('change', function(){
        $('#wizards').toggle("fast");
        $('#melees').slideUp('fast');
        $('#rangers').slideUp('fast');
    });

Answer 2

这是您想要的吗？

<StatusRecords>
<Status>
<Name>final</Name>
<Date>1/1/2006</Date>
</Status>
<Status>
<Name>final</Name>
<Date>1/1/2010</Date>
</Status>
<Status>
<Name>interim</Name>
<Date>1/1/2005</Date>
</Status>
</StatusRecords>

JS不在复选框上切换div单击

2 个答案: