javascript，如果选中复选框，则启动动画答案

【问题标题】：javascript, initiate animation if checkbox is checkedjavascript，如果选中复选框，则启动动画
【发布时间】：2017-11-28 00:37:24
【问题描述】：

我想在网站上启动动画，但只选中了某个复选框，但我不知道该怎么做。你们能帮帮我吗？

现在我得到了这个：

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Tests</title>
    <link rel="stylesheet" href="style.css">
    <script src="js/jquery.js"></script>
    <script>
        $(document).ready(
                if (document.getElementById('#slide-1').checked){
                    function animation(){
                        $('.sl-art').fadeOut(1000);
                        $('#sl-art-1').fadeIn(1000);
                    }
                }
                else if (document.getElementById('#slide-2').checked){
                    function animation(){
                        $('.sl-art').fadeOut(1000);
                        $('#sl-art-2').fadeIn(1000);
                    }
                }
                else if (document.getElementById('#slide-3').checked){
                    function animation(){
                        $('.sl-art').fadeOut(1000);
                        $('#sl-art-3').fadeIn(1000);
                    }
                }
        );      
    </script>
</head>
<body>
    <div id="sl-principal">
        <div id="sl-lucarne">
            <article class="sl-art" id="sl-art-1">
            <h2>Premier article</h2>
            <p>Premier slide</p>
            </article>

            <article class="sl-art" id="sl-art-2">
            <h2>Deuxième article</h2>
            <p>Deuxième slide</p>
            </article>

            <article class="sl-art" id="sl-art-3">
            <h2>Troisième Article</h2>
            <p>Troisième slide</p>
            </article>
        </div>
    </div>
    <article class="checkbox">
        <label for="sl-art-1"><input type="radio" name="slide" value="slide-1" id="slide-1">Slide 1</input></label>
        <label for="sl-art-1"><input type="radio" name="slide" value="slide-2" id="slide-2">Slide 2</input></label>
        <label for="sl-art-1"><input type="radio" name="slide" value="slide-3" id="slide-3">Slide 3</input></label>
    </article>
</body>

如您所见，我想根据是否选中了女巫框来淡入某个幻灯片。

感谢您的帮助。

【问题讨论】：

你试过使用CSS transitions和checked attribute selctor吗？

标签： javascript html if-statement jquery-animate checked

【解决方案1】：

您的 HTML 和 javascript 目前存在重大问题。

<input> 应该是自动关闭的； <label> 如果包装了一个元素，则不需要 for 属性（for 属性的重复值要少得多）； $(document).ready() 接受函数句柄、闭包或箭头函数；声明function animation() 并没有在当时和那里调用它； document.getElementById 需要准确的 id 值，而不是 CSS 样式选择器（删除 # 符号）。

除了向您的收音机添加一个更改事件侦听器之外，代码就可以工作了。您只是在标记和 javascript 方面遇到了很多小问题。所有这些都清理干净了，你有这个：

$(document).ready(function(){
    $('input:radio').on('change', function(){
        if (document.getElementById('slide-1').checked){
            $('.sl-art').fadeOut(1000);
            $('#sl-art-1').fadeIn(1000);
        }
        else if (document.getElementById('slide-2').checked){
            $('.sl-art').fadeOut(1000);
            $('#sl-art-2').fadeIn(1000);
        }
        else if (document.getElementById('slide-3').checked){
            $('.sl-art').fadeOut(1000);
            $('#sl-art-3').fadeIn(1000);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sl-principal">
  <div id="sl-lucarne">
      <article class="sl-art" id="sl-art-1">
      <h2>Premier article</h2>
      <p>Premier slide</p>
      </article>

      <article class="sl-art" id="sl-art-2">
      <h2>Deuxième article</h2>
      <p>Deuxième slide</p>
      </article>

      <article class="sl-art" id="sl-art-3">
      <h2>Troisième Article</h2>
      <p>Troisième slide</p>
      </article>
  </div>
</div>
<article class="checkbox">
    <label><input type="radio" name="slide" value="slide-1" id="slide-1">Slide 1</label>
    <label><input type="radio" name="slide" value="slide-2" id="slide-2">Slide 2</label>
    <label><input type="radio" name="slide" value="slide-3" id="slide-3">Slide 3</label>
</article>

【讨论】：

您可以使选择器更具体。也许像$('article.checkbox input:radio')这样的东西？

【解决方案2】：

试试这个。这里是fiddle

HTML：

<div id="sl-principal">
    <div id="sl-lucarne">
        <article class="sl-art" id="sl-art-1">
        <h2>Premier article</h2>
        <p>Premier slide</p>
        </article>

        <article class="sl-art" id="sl-art-2">
        <h2>Deuxième article</h2>
        <p>Deuxième slide</p>
        </article>

        <article class="sl-art" id="sl-art-3">
        <h2>Troisième Article</h2>
        <p>Troisième slide</p>
        </article>
    </div>
</div>
<article class="checkbox">
    <label for="sl-art-1"><input type="radio" class='slides' name="slide" data-key='1' value="slide-1" id="slide-1">Slide 1</input></label>
    <label for="sl-art-2"><input type="radio"  class='slides' name="slide" data-key='2' value="slide-2" id="slide-2">Slide 2</input></label>
    <label for="sl-art-3"><input type="radio"  class='slides' name="slide" data-key='3' value="slide-3" id="slide-3">Slide 3</input></label>
</article>

JS：

 $(document).ready(function(){
   $('.slides').click(function(e){
     $('.sl-art').fadeOut(1000);
     $('#sl-art-'+parseInt(e.target.dataset.key)).fadeIn(1000);
   });
 });

【讨论】：

抱歉，这有什么帮助？我正在尝试做到这一点，以便在选中第一个复选框时，出现第一个幻灯片，当检查第二个复选框时，第二个幻灯片出现了，依此类推...
您是否需要默认隐藏所有内容并在单击特定幻灯片编号时显示特定幻灯片数据？
不，不是，我只是想通过选择无线电样式输入来控制女巫幻灯片的出现。