Question

我正在尝试使用图像制作“全选”切换按钮。单击左侧的按钮可以使用此代码，但如果隐藏按钮，则无法单击该图像。

如何使图像可以点击并删除右侧的按钮？

这是我的代码：

function togglecheckboxes(master,group){
	var cbarray = document.getElementsByClassName(group);
	for(var i = 0; i < cbarray.length; i++){
		var cb = document.getElementById(cbarray[i].id);
		cb.checked = master.checked;
	}
}

/* this will remove box

input[type=checkbox] {
    display:none;
}
 */
input[type=checkbox] + label {
    background: none;
    height: 50px;
    width: 72px;
    display:inline-block;
    cursor: pointer;
    padding: 0 0 0 0px;
    filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -webkit-filter: grayscale(1);
}
   
input[type=checkbox]:checked + label {
    background: none;
    height: 50px;
    width: 72px;
    display:inline-block;
    cursor: pointer;
    padding: 0 0 0 0px;
    filter: grayscale(0);
    -o-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -o-transition:.1s;
    -ms-transition:.1s;
    -moz-transition:.1s;
    -webkit-transition:.1s;
}
label.all {
    margin-bottom: -17px;
}

<input type="checkbox" id="cbgroup1_master" onchange="togglecheckboxes(this,'cbgroup1')">
    <label for="music">
        <img src="images/music_selector.png" />
    </label> <br><br>
<input type="checkbox" id="cb1_1" class="cbgroup1" name="cbg1[]" value="1">
    <label for="music">
        <img src="images/music_selector.png" />
    </label><br>
<input type="checkbox" id="cb1_2" class="cbgroup1" name="cbg1[]" value="2">
    <label for="music">
        <img src="images/music_selector.png" />
    </label><br>
<input type="checkbox" id="cb1_3" class="cbgroup1" name="cbg1[]" value="3">
    <label for="music">
        <img src="images/music_selector.png" />
    </label><br>
<input type="checkbox" id="cb1_4" class="cbgroup1" name="cbg1[]" value="4">
    <label for="music">
        <img src="images/music_selector.png" />
    </label>
</body>

Answer 1

您的标签＆＃34;对于＆＃34;属性设置为相同而不是以输入为目标（复选框）。

更改值（输入的ID），图像将可点击。

＆＃13;

function togglecheckboxes(master,group){
	var cbarray = document.getElementsByClassName(group);
	for(var i = 0; i < cbarray.length; i++){
		var cb = document.getElementById(cbarray[i].id);
		cb.checked = master.checked;
	}
}

＆＃13;

/* this will remove box

input[type=checkbox] {
    display:none;
}
 */
input[type=checkbox] + label {
    background: none;
    height: 50px;
    width: 72px;
    display:inline-block;
    cursor: pointer;
    padding: 0 0 0 0px;
    filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -webkit-filter: grayscale(1);
}
   
input[type=checkbox]:checked + label {
    background: none;
    height: 50px;
    width: 72px;
    display:inline-block;
    cursor: pointer;
    padding: 0 0 0 0px;
    filter: grayscale(0);
    -o-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -o-transition:.1s;
    -ms-transition:.1s;
    -moz-transition:.1s;
    -webkit-transition:.1s;
}
label.all {
    margin-bottom: -17px;
}

＆＃13;

<input type="checkbox" id="cbgroup1_master" onchange="togglecheckboxes(this,'cbgroup1')">
    <label for="cbgroup1_master">
        <img src="images/music_selector.png" />
    </label> <br><br>
<input type="checkbox" id="cb1_1" class="cbgroup1" name="cbg1[]" value="1">
    <label for="cb1_1">
        <img src="images/music_selector.png" />
    </label><br>
<input type="checkbox" id="cb1_2" class="cbgroup1" name="cbg1[]" value="2">
    <label for="cb1_2">
        <img src="images/music_selector.png" />
    </label><br>
<input type="checkbox" id="cb1_3" class="cbgroup1" name="cbg1[]" value="3">
    <label for="cb1_3">
        <img src="images/music_selector.png" />
    </label><br>
<input type="checkbox" id="cb1_4" class="cbgroup1" name="cbg1[]" value="4">
    <label for="cb1_4">
        <img src="images/music_selector.png" />
    </label>
</body>

＆＃13;

Answer 2

您需要更改一些标记

设置复选框ID属性和<label for>相同

为主人

<input type="checkbox" id="cbgroup1_master" onchange="togglecheckboxes(this,'cbgroup1')">
    <label for="cbgroup1_master"> <!-- for attribute same as checkbox id -->
        <img src="images/music_selector.png" />
    </label> <br><br>

为孩子

<input type="checkbox" id="cb1_1" class="cbgroup1" name="cbg1[]" value="1">
    <label for="cb1_1"> <!-- for attribute same as checkbox id -->
        <img src="images/music_selector.png" />
    </label><br>

jS Fiddle

Answer 3

标签上的 for - 属性应该具有复选框的 id 。如果复选框ID为“music”，则 for -attribute也应为“music”。

/* this will remove box

input[type=checkbox] {
    display:none;
}
 */
input[type=checkbox] + label {
    background: none;
    height: 50px;
    width: 72px;
    display:inline-block;
    cursor: pointer;
    padding: 0 0 0 0px;
    filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -webkit-filter: grayscale(1);
}
   
input[type=checkbox]:checked + label {
    background: none;
    height: 50px;
    width: 72px;
    display:inline-block;
    cursor: pointer;
    padding: 0 0 0 0px;
    filter: grayscale(0);
    -o-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -o-transition:.1s;
    -ms-transition:.1s;
    -moz-transition:.1s;
    -webkit-transition:.1s;
}
label.all {
    margin-bottom: -17px;
}

<input type="checkbox" id="music" class="cbgroup1" name="cbg1[]" value="1">
    <label for="music">
        <img src="images/music_selector.png" />
    </label>

将输入更改为图像并使其可单击

3 个答案:

jS Fiddle