单选按钮不显示选中

我创建了一些单选按钮，单击时显示价格。我使用的是下面的代码..单选按钮不显示选中

<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

单选按钮不显示选中

回答

相关问题