在進(jìn)行網(wǎng)頁(yè)開發(fā)時(shí),經(jīng)常需要使用復(fù)選框(checkbox)來選擇多個(gè)選項(xiàng)。有時(shí)候,我們需要對(duì)多個(gè)復(fù)選框進(jìn)行操作,比如說只能選中一個(gè)。在這種情況下,可以使用 jQuery 來實(shí)現(xiàn)只選中一個(gè)復(fù)選框。
$(document).ready(function(){ // 給所有復(fù)選框添加點(diǎn)擊事件 $("input[type='checkbox']").click(function(){ // 當(dāng)前復(fù)選框是否選中 var checked = $(this).prop("checked"); if (checked) { // 遍歷所有復(fù)選框,取消選中狀態(tài) $("input[type='checkbox']").each(function(){ $(this).prop("checked", false); }); // 選中當(dāng)前復(fù)選框 $(this).prop("checked", true); } }); });
上面的代碼首先獲取所有的復(fù)選框,然后給它們添加點(diǎn)擊事件。當(dāng)某個(gè)復(fù)選框被選中時(shí),代碼會(huì)遍歷所有的復(fù)選框,并將它們的選中狀態(tài)都取消,最后只選中當(dāng)前被點(diǎn)擊的復(fù)選框。
通過這種方式,我們可以確保用戶每次只能選中一個(gè)復(fù)選框,而不會(huì)出現(xiàn)多選的情況,從而提升用戶體驗(yàn)。