我正在處理一個 ASP.NET Core 專案，需要checked input[type="radio"]在單擊輸入時獲取 的值。我的 HTML 代碼如下：
@if (Model.ProductColors.Any())
{
<div class="fs-sm mb-4"><span class="text-heading fw-medium me-1">???:</span><span class="text-muted" id="colorValue"></span></div>
<div class="fs-sm mb-4"><span class="text-heading fw-medium me-1">?????:</span><span class="text-muted" id="colorCode"></span></div>
<div >
@{int j = 1;
}
@foreach (var item in Model.ProductColors)
{
<div onclick="doActiveRadioButton('color_@j')" id="div_color_@j" >
<input @((j==1)?"checked":"") type="radio" name="color" id="color_@j" data-bs-label="colorOption" value="@item.ColorId">
<label for="color1"><span style="background-image: url(/Images/ProductThumbs/@item.ImageName)"></span></label>
</div>
j ;
}
我試圖獲取以下代碼末尾的值：
<script>
function doActiveRadioButton(id) {
var slides = document.querySelectorAll(".productColor input");
console.log(slides.length);
for (var i = 0; i < slides.length; i ) {
slides[i].removeAttribute("checked");
}
var s = document.getElementById(id);
s.setAttribute("checked", "checked");
var g = document.querySelectorAll(".productColor label");
for (var i = 0; i < g.length; i ) {
g[i].style.border = "1px solid #e3e9ef";
}
var d = document.querySelector("#div_" id " label");
d.style.border = "1px solid #fe696a";
var radioId = document.querySelector('.productColor input[type = "radio"]:checked');
console.log(radioId);
var c = document.querySelector("#colorCode");
c.innerHTML = "green!";
}
</script>
當我console.log()用來記錄radioId時，我的意思是以下部分：
var radioId = document.querySelector('.productColor input[type = "radio"]:checked').value;
console.log(radioId);
第一次，它正常作業并向我顯示真正的 radioId（例如 9），但是當我第二次或更多次單擊輸入時，它顯示以下錯誤：
未捕獲的型別錯誤：無法在 HTMLDivElement.onclick (2008:745) 的 doActiveRadioButton (2008:1621) 處讀取 null 的屬性（讀取“值”）
有人可以向我解釋一下，并請給我一些 sulotions 或替代方案嗎？
uj5u.com熱心網友回復：
好吧，您查找已檢查的輸入。當它被檢查時，你會發現它。當您取消選中它時，它不再被找到并document.querySelector回傳null。這意味著該value財產不再存在。
您可能想先檢查是否找到該元素。
const productColorInput = document.querySelector('.productColor input[type="radio"]:checked')
if (productColorInput !== null) {
const radioId = productColorInput.value;
console.log(radioId);
}
或者檢查checked屬性而不是查詢已檢查的輸入。（這可能更可靠，因為它總是回傳一個元素）。
const productColorInput = document.querySelector('.productColor input[type="radio"]');
if (productColorInput.checked === true) {
const radioId = productColorInput.value;
console.log(radioId);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/388138.html