單選按鈕不顯示選中

我創建了一些單選按鈕，單擊時顯示價格。我使用的是下面的代碼..單選按鈕不顯示選中

<label for='<?php echo $price; ?>' class="tabs"> 
    <input type="radio" name="j" class="radioBtn" id='<?php echo $price; ?>' value="<?php echo $price; ?>" onclick="calculate(this);" /> 
    <?php echo $number; ?> 
    </label>

然後被這個樣子的價格：

<span class="prices" id="output"></span>

通過

function calculate(obj) { document.getElementById("output").innerHTML = obj.value;}

價格和按鈕是否工作正常，但我需要對標籤進行樣式設置以顯示正在選擇正確的按鈕。在DOM中，它表示無線電輸入已被選中，但它沒有被呈現在HTML中。

我還需要獲得第一個複選框作爲默認選擇。

任何人都可以幫助指出我在正確的方向？

稻田

來源

2017-02-22 paddywinz

根據您使用的HTML版本，輸入框的id屬性可能無效。例如，HTML4要求該ID以字母開頭。所以價格不會是唯一標識符的最佳選擇，特別是如果您有兩個相同的價格。 – clarmond

目前所有的價格都不一樣。這是否會成爲收音機輸入未顯示爲已檢查的原因？ – paddywinz

我創建了這個代碼的靜態版本（沒有PHP變量），它工作正常。是否有可能看到整個呈現的HTML？ – clarmond

grofar.com網站看起來不錯。當你說樣式在標籤上不起作用時，你究竟是什麼意思？您是否嘗試應用不同的顏色，字體等？

至於默認選擇第一個選項，您有幾個選項。第一個是使用PHP來確定第一個，並將checked屬性添加到input元素。舉例來說，如果你正在做一個循環，使用if/then語句來設置檢查屬性，如果循環計數器1

第二個選擇是使用jQuery選擇第一個框：

$(function() { 
    $("input[name='j']:first").prop("checked", true); 
});

但是，使用該方法，您的calculate函數未被調用，因此價格未更新。

第三個選項是使用jQuery來模擬第一箱的點擊：

$(function() { 
    $("input[name='j']:first").click(); 
});

這將選擇框和更新價格。

來源

2017-02-22 15:26:08 clarmond

謝謝你這麼多，第三個選項的魅力。 – paddywinz

我正在嘗試將選中的無線標籤設爲不同的顏色並移除輸入本身。但是，如果沒有選中的輸入，我不能使用jQuery向父類添加一個類 – paddywinz

而不是刪除輸入，你可以隱藏它嗎（'''onclick =「calculate（this）; $（this）.hide（）（''''）或者禁用它（'''onclick =「calculate（this）; $（this）.prop（'disabled'，true）」'''）？然後，您仍然可以將新樣式應用於父級。 – clarmond

單選按鈕不顯示選中

回答

相關問題