我能夠創建一組復選框并像單選按鈕一樣在它們之間切換。但是當我點擊不同的集合時，之前的集合檢查選項被禁用。誰能指導我哪里出錯了。謝謝你。
以下是我想要實作的目標：但是當我使用 Jquery 時，我的邏輯不起作用，如this fiddle所示。 http://jsfiddle.net/jukd6xr7/18/
我當前的代碼如下：
//set1
<li class="dropdown-item">
<input type="checkbox" id="InchMm" data-id=0>
<label for="unit1">Inch</label>
</li>
<li >
<input type="checkbox" id="InchMm" data-id=1 checked>
<label for="unit2">Mm/label>
</li>
<hr/>
//set2
<li >
<input type="checkbox" id="Temperature" data-id=2>
<label for="unit3">Farenhiet</label>
</li>
<li >
<input type="checkbox" id="Temperature" data-id=3 checked>
<label for="unit4">Celsuis</label>
</li>
// 英寸到毫米
const checkboxes1 = document.querySelectorAll('#InchMm')
document.body.addEventListener('click', (e) => {
for (const c1 of checkboxes1) {
c1.checked = false
const clickedCheckbox1 = [...checkboxes1].find(c => c === e.target)
clickedCheckbox1.checked = true
}
const id = e.target.dataset.id,
checked = e.target.checked;
if (id === 0) {
//logic here
}
})
// celcius to farenheit
const checkboxes2 = document.querySelectorAll('#Temperature')
document.body.addEventListener('click', (e) => {
for (const c2 of checkboxes2) {
c2.checked = false
const clickedCheckbox2 = [...checkboxes1].find(c2 => c12=== e.target)
clickedCheckbox2.checked = true
}
const id = e.target.dataset.id,
checked = e.target.checked;
if (id === 2) {
// logic here
}
})
uj5u.com熱心網友回復：
更改了類的 id，id 是唯一的，您不能有多個具有相同 id 的元素，因此如果您想定位多個元素，可以使用 class 代替
ID
id 全域屬性定義了一個識別符號 (ID)，該識別符號在整個檔案中必須是唯一的。其目的是在鏈接（使用片段識別符號）、腳本或樣式（使用 CSS）時識別元素。
<li class="dropdown-item">
<input type="checkbox" class="InchMm" data-id=0>
<label for="unit1">Inch</label>
</li>
<li >
<input type="checkbox" data-id=1 checked>
<label for="unit2">Mm</label>
</li>
<hr/>
<li >
<input type="checkbox" data-id=2>
<label for="unit3">Farenhiet</label>
</li>
<li >
<input type="checkbox" data-id=3 checked>
<label for="unit4">Celsuis</label>
</li>
現在您可以為每組復選框使用單獨的 onchange
// Inch to Mm
$(".InchMm").change(function(){
$(".InchMm").prop('checked',false);
$(this).prop('checked',true);
});
//Farenhiet to celsius
$(".Temperature").change(function(){
$(".Temperature").prop('checked',false);
$(this).prop('checked',true);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/503882.html
標籤：javascript 复选框
上一篇：SVG沒有完全影片