使许多图片可见的复选框

Question

我对js和html很陌生，并且在任务中遇到了一些问题。 我想创建一个"复选框"，使一些图片可见。例如，我有 5 张照片。每张照片上都有一个男性或女性。现在我想让所有女性图片都可见，如果有人选中"女性复选框"。我认为我需要在 js 中创建一些数据表（？），但不确定该怎么做。

这是我到目前为止创建的

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

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

知道我怎样才能让它工作吗？希望你能帮到忙。

干杯！

Answer 1

我对你的HTML做了一些更改;在处理一组元素时，通常最好使用类，---使用ID更难。以下是我所做的一些更改：

• 删除了内联 JavaScript - 不建议使用
• 删除了内联 CSS - 也不推荐
• 添加了一个类而不是内联 css 并定义了一个规则
• 添加了两个事件处理程序而不是内联 JS
• 将:checkbox ID 更改为 name s
• 从img元素中删除了 ID
• 为每个图像添加了data属性，data-gender与name="gender"一起使用
• 为每个:checkbox添加了value属性
• BONUS 添加了一个正确使用 ID - 属性标签 - 单击标签以选中/取消选中

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

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

.myimage {
  visibility:hidden;
}

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

Answer 2

您需要

将 id 更改为string_with_number的内容。

例如：id="image1"...等

然后，您可以将此功能与var el = document.getElementById（"image"+id）;

而不是可见性，您应该使用显示：阻止和显示：无