使多张图片可见的复选框

我对js和html很陌生，并且在任务中遇到了一些问题。我想创建一个"复选框"，使一些图片可见。例如，我有 5 张照片。每张照片上都有一个男性或女性。现在我想让所有女性图片都可见，如果有人选中"女性复选框"。到目前为止，我有一个jq解决方案，并尝试将其转换为js，但失败了。有谁知道如何解决这个问题？

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

我试图通过将函数更改为

		function checkgender(type) {
	    for (i = 1; i < 6; i++) { 
		var el = document.getElementById(i);
		if(type==1){
			if (el.data-gender=="male") {
				el.style.visibility="visible";
				}
			else {
				el.style.visibility="hidden";
				}
			}
		else if(type==2){
			if (el.data-gender=="female") {
				el.style.visibility="visible";
				}
			else {
				el.style.visibility="hidden";
				}
		}
	}
}

<label for="gender1">male</label>
    <input type="checkbox" name="gender" id="gender1" value="male" onChange="checkgender(1);" /><br/>
    <label for="gender2">female</label>
    <input type="checkbox" name="gender" id="gender2" value="female" onChange="checkgender(2);"/><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 id='1' src='/home/Person1.png' data-gender="male" class="myimage"  style='visibility:hidden'/> <!--male-->
    <img id='2' src='/home/Person2.png' data-gender="female" class="myimage" style='visibility:hidden'/> <!--female-->
    <img id='3' src='/home/Person3.png' data-gender="female" class="myimage"  style='visibility:hidden'/> <!--female-->
    <img id='4' src='/home/Person4.png' data-gender="male" class="myimage" style='visibility:hidden'/> <!--male-->
    <img id='5' src='/home/Person5.png' data-gender="female" class="myimage"  style='visibility:hidden'/> <!--female-->
    </div>

但它没有用。如果有人能告诉我如何解决它，那就太好了。