如何隱藏原始復(fù)選框并使標(biāo)簽可單擊并像復(fù)選框一樣？我確信有一種方法可以在 JS 中做到這一點(diǎn)！我正在使用 PHP 加載標(biāo)簽和復(fù)選框，它們是動(dòng)態(tài)加載的，并且總是可以不同，具體取決于用戶在此頁(yè)面之前選擇的內(nèi)容。謝謝！ foreach ($row as $type) { ?> <label for="<?php echo $type['id'] ?>" class="interests-span"> <h3><?php echo $type['Type'] ?></h3> </label> <input id="<?php echo $type['id'] ?>" type="checkbox" style="display:block;" value="<?php echo $type['Type']?>" name="options[]"/> <?php }
2 回答
開(kāi)心每一天1111
TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超13個(gè)贊
注意：標(biāo)簽應(yīng)與 id 或 name 鏈接。
這是您想要的自定義實(shí)現(xiàn)。 但我認(rèn)為選擇僅包含值的復(fù)選框是不正確的
foreach ($row as $type) { ?>
<label for="<?php echo $type['Type'] ?>" class="interests-span"
onclick="toggleCheckboxFromLabel('<?php echo $type['Type'] ?>')"
>
<h3><?php echo $type['Type'] ?></h3>
</label>
<input type="checkbox" style="display:block;" value="<?php echo $type['Type']?>"
name="options[]"/>
<?php } ?>
<script>
function toggleCheckboxFromLabel(val){
var checkbox = document.querySelector('input[type="checkbox"][value="' + val + '"]')
checkbox.checked = !checkbox.checked;
}
</script>
偶然的你
TA貢獻(xiàn)1841條經(jīng)驗(yàn) 獲得超3個(gè)贊
只需添加一個(gè)等于 for 屬性的 id 即可。
$counter = 0;
foreach ($row as $type) { ?>
<label for="<?= 'checkbox_' . $counter ?>" class="interests-span">
<h3><?php echo $type['Type'] ?></h3>
</label>
<input type="checkbox" style="display:none;" id="<?= 'checkbox_' . $counter ?>" value="<?php echo $type['Type']?>"
name="options[]"/>
<?php
$counter++;
} ?>
- 2 回答
- 0 關(guān)注
- 183 瀏覽
添加回答
舉報(bào)
0/150
提交
取消