Question

我对js和html很新，并且遇到了一些任务问题。我想创建一个＆＃34;复选框＆＃34;这将使一些图片可见。例如，我有5张照片。每张照片上都有男性或女性。现在我想让所有的女性照片都可见，如果有人检查了＆＃34;女性复选框＆＃34;。我想我需要在js中创建一些数据表（？）但不知道如何做。

这是我到目前为止创建的

＆＃13;

  function toggleVisibility(id) {
           var el = document.getElementById(id);

          if (el.style.visibility=="visible") {
              el.style.visibility="hidden";
                }
            else {
                 el.style.visibility="visible";
                 }
         }

＆＃13;

<div class='Humans'>

    <label for="menu">male</label>
    <input type="checkbox" id="malecheck" onChange="checkpaycondition('1');" /><br/>

    <label for="menu">female</label>
    <input type="checkbox" id="femalecheck" onChange="checkpaycondition('2');" /><br/>

    <label for="picture">Person1</label>
    <input type="checkbox" id="Person1check" onChange="toggleVisibility('4');" /><br/>

    <label for="picture">Person2</label>
    <input type="checkbox" id="Person2check" onChange="toggleVisibility('1');" /><br/>

    <label for="picture">Person3</label>
    <input type="checkbox" id="Person3check" onChange="toggleVisibility('2');" /><br/>

    <label for="picture">Person4</label>
    <input type="checkbox" id="Person4check" onChange="toggleVisibility('3');" /><br/>

    <label for="picture">Person5</label>
    <input type="checkbox" id="Person5check" onChange="toggleVisibility('5');" /><br/>

    <img id='1' src='/home/Person1.png'  style='visibility:hidden'/> <!--male-->
    <img id='2' src='/home/Person2.png'  style='visibility:hidden'/> <!--female-->
    <img id='3' src='/home/Person3.png'  style='visibility:hidden'/> <!--female-->
    <img id='4' src='/home/Person4.png'  style='visibility:hidden'/> <!--male-->
    <img id='5' src='/home/Person5.png'  style='visibility:hidden'/> <!--female-->
    </div>

＆＃13;

知道如何才能让它发挥作用吗？希望你能帮忙。

干杯！

Answer 1

您需要将id更改为string_with_number。

例如： id =＆＃34; image1＆＃34; ... etc

然后你可以使用这个功能 var el = document.getElementById（＆＃34; image＆＃34; + id）;

而不是可见性，您应该使用display：block和display：none

Answer 2

我对您的HTML进行了一些更改;在处理一组元素时使用类通常会更好 - 使用id会更难。以下是我所做的一些更改：

删除内联JavaScript - 不推荐
删除了内联CSS - 不建议使用
添加了一个类而不是内联css并定义了规则
添加了两个事件处理程序，而不是内联JS
将:checkbox ID更改为name而非
从img元素中删除了ID
为每张图片添加了data属性，data-gender与name="gender"
为每个value

:checkbox

BONUS 添加了一个正确使用的ID - 属性标签 - 点击标签来检查/取消选中

正如您所看到的，一旦您的HTML设计得很好，编写JavaScript和CSS就是小菜一碟。

＆＃13;

$(document).ready(function() {
    //Event handler for checkboxes with name="gender"
    $(':checkbox[name=gender]').on('change',function() {
        $('img[data-gender=' + this.value + ']').css('visibility', this.checked ? 'visible' : 'hidden');
    });
    //Event handler for checkboxes with name="visibility"
    $(':checkbox[name=visibility]').on('change', function() {
        $('img[src*=' + this.value + ']').css('visibility',this.checked ? 'visible' : 'hidden');
    });
});

＆＃13;

.myimage {
  visibility:hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='Humans'>

    <label for="gender1">male</label>
    <input type="checkbox" name="gender" id="gender1" value="male" /><br/>

    <label for="gender2">female</label>
    <input type="checkbox" name="gender" id="gender2" value="female" /><br/>

    <label for="visibility1">Person1</label>
    <input type="checkbox" name="visibility" id="visibility1" value="Person1" /><br/>

    <label for="visibility2">Person2</label>
    <input type="checkbox" name="visibility" id="visibility2" value="Person2" /><br/>

    <label for="visibility3">Person3</label>
    <input type="checkbox" name="visibility" id="visibility3" value="Person3" /><br/>

    <label for="visibility4">Person4</label>
    <input type="checkbox" name="visibility" id="visibility4" value="Person4" /><br/>

    <label for="visibility5">Person5</label>
    <input type="checkbox" name="visibility" id="visibility5" value="Person5" /><br/>

    <img src='/home/Person1.png' data-gender="male" class="myimage"/> <!--male-->
    <img src='/home/Person2.png' data-gender="female" class="myimage"/> <!--female-->
    <img src='/home/Person3.png' data-gender="female" class="myimage"/> <!--female-->
    <img src='/home/Person4.png' data-gender="male" class="myimage"/> <!--male-->
    <img src='/home/Person5.png' data-gender="female" class="myimage"/> <!--female-->
    </div>

＆＃13;

复选框可以显示许多图片

2 个答案: