Question

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

＆＃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;

我尝试通过将功能更改为

来编辑它

＆＃13;

		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";
				}
		}
	}
}

＆＃13;

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

＆＃13;

但它没有用。如果有人能告诉我如何修复它会很棒。

Answer 1

我认为在将代码转换为函数后，我会将此作为正式答案，现在的问题是您以错误的方式请求data-gender属性（请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes）。您可以将if (el.data-gender==替换为if (el.dataset.gender==来解决此问题。希望这会有所帮助，如果可以的话，请你接受这个！

可以显示多张图片的复选框

1 个答案: