javascript - 单选按钮未显示选中状态

Question

我创建了一些单选按钮，单击时会显示价格。我正在使用的代码如下..

   <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 中，它表示 radio 输入已检查，但并未在 HTML 中呈现。

我还需要默认选中第一个复选框。

有人可以帮我指出正确的方向吗？

稻谷

Answer 1

grofar.com 网站对我来说看起来不错。当您说标签上的样式不起作用时，您到底是什么意思？您是否尝试应用不同的颜色、字体等？

至于默认选择第一个选项，您有几个选择。第一种方法是使用 PHP 来确定第一个并将 checked 属性添加到 input 元素。例如，如果您正在执行循环，则如果循环计数器为 1，请使用 if/then 语句设置 checked 属性。

第二个选项是使用 jQuery 选择第一个框:

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

但是，使用该方法时，不会调用您的 calculate 函数，因此价格不会更新。

第三个选项是使用 jQuery 模拟第一个框的单击:

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

这将选择该框并更新价格。