将 js Select 转换为单选按钮？答案

【问题标题】：Convert js Select to Radio buttons?将 js Select 转换为单选按钮？
【发布时间】：2013-12-02 04:26:32
【问题描述】：

我正在尝试将具有 onchange 功能的选择菜单转换为单选按钮。但我不是程序员。这里的例子有两组，选择工作，收音机不工作。我认为这可能是处理“field_type”的问题。

示例链接 - http://originscards.com/pledge/strip.php

<script language="JavaScript" type="text/javascript">
var field_type = { check: 0, group: 1 }; // Control Type
var c_iitem = { pledge: 0, pledge2: 1, pledge3: 2, pledge4: 3, shipping: 4 };

var s_aitem = [
{sz: 'pledge', ct: field_type.group, pledgeAmt: 12, qty: 0},
{sz: 'pledge2', ct: field_type.group, pledgeAmt: 17, qty: 0},
{sz: 'pledge3', ct: field_type.group, pledgeAmt: 29, qty: 0},
{sz: 'pledge4', ct: field_type.group, pledgeAmt: 41, qty: 0},       
{sz: 'shipping', ct: field_type.check, pledgeAmt: 0, qty: 0}
];

function UpdateQty(iitem)
{
var ctl = document.getElementById(s_aitem[iitem].sz);
if (s_aitem[iitem].ct == field_type.check)
{ s_aitem[iitem].qty = ctl.checked ? 1 : 0; }
else if (s_aitem[iitem].ct == field_type.group)
{
    if (iitem == c_iitem.pledge)
        s_aitem[c_iitem.pledge].qty = s_aitem[c_iitem.pledge2].qty = s_aitem[c_iitem.pledge3].qty = s_aitem[c_iitem.pledge4].qty = 0;                   

    i = parseInt(ctl.value, 4);
    if (i >= 0)
        s_aitem[iitem + i].qty = 1;
}
else // num
{ s_aitem[iitem].qty = (ctl.value == '' || isNaN(ctl.value)) ? 0 :   
parseInt(ctl.value, 10); }
}

function NewVal(iitem)
{
var i, pledgeAmt, shipping;
UpdateQty(iitem);
pledgeAmt = 0;
for (i = s_aitem.length; --i >= 0; )
    pledgeAmt += s_aitem[i].qty * s_aitem[i].pledgeAmt;
if (s_aitem[c_iitem.shipping].qty == 0)
    shipping = 0;
else
{
    shipping =      
    s_aitem[c_iitem.pledge].qty * 9 +
    s_aitem[c_iitem.pledge2].qty * 9 +
    s_aitem[c_iitem.pledge3].qty * 14 +
    s_aitem[c_iitem.pledge4].qty * 14 ;
}

document.getElementById('pledgeAmt').innerHTML = pledgeAmt;
document.getElementById('shipAmt').innerHTML = shipping;
document.getElementById('total').innerHTML = pledgeAmt + shipping;
}

function UpdatePrices()
{
UpdateQty(c_iitem.pledge);  
NewVal(c_iitem.shipping);
}

</script>

</head>
<body>

<form name="form1">

<!-- SELECT WORKS -->    
<select size=1 name="pledge" id="pledge" onchange="NewVal(c_iitem.pledge);" 
onkeyup="NewVal(c_iitem.pledge);">
<option value="-1" selected> </option>
<option value="0">pledgeA</option>
<option value="1">pledgeB</option>
<option value="2">pledgeC</option>
<option value="3">pledgeD</option>
</select>

<!-- RADIO DOES NOT -->    
<input name="pledge" id="pledge" type="radio" value="-l" style="display:none" checked>  
<input name="pledge" id="pledge" type="radio" value="0" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);">Pledge A<br/>    
<input name="pledge" id="pledge" type="radio" value="1" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);">Pledge B<br/>
<input name="pledge" id="pledge" type="radio" value="2" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);">Pledge C<br/>
<input name="pledge" id="pledge" type="radio" value="3" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);">Pledge D<br/>

<input id="shipping_us" type="radio" name="shipping" value="-1" checked onchange="NewVal(c_iitem.shipping);" onkeyup="NewVal(c_iitem.shipping);">
No Shipping<br/>
<input id="shipping" type="radio" name="shipping" value="0" onchange="NewVal(c_iitem.shipping);" onkeyup="NewVal(c_iitem.shipping);">
Shipping

Pledge $<span id="pledgeAmt">0</span>
Shipping $<span id="shipAmt">0</span>
Total $<span id="total">0</span>
</form>

<script language="JavaScript" type="text/javascript">UpdatePrices();</script>

【问题讨论】：

StackOverflow 用户不需要金钱来帮助你。如果他们知道答案，他们无论如何都会帮助你。 ;)
究竟如何转换？
哈，谢谢阿哈恩。我需要收音机以与 Select 相同的方式向 NewVal 函数发送一个值。暂时没有发生
@RickDavidson 没问题；祝你好运！我没有这方面的经验，否则我会尽力提供帮助。 :)

标签： jquery select onchange radio

【解决方案1】：

我将首先更改您必须使用单独名称的 ID 字段，目前您将通过“pledge”获得的唯一 byID 字段是选择器元素

<form name="form1">

<!-- SELECT WORKS -->    
<select size=1 name="pledge" id="pledge" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);">
<option value="-1" selected> </option>
<option value="0">pledgeA</option>
<option value="1">pledgeB</option>
<option value="2">pledgeC</option>
<option value="3">pledgeD</option>
</select>
<hr />
<!-- RADIO DOES NOT -->    
<input type="radio" name="pledge" id="pledge" value="-l" style="display:none" checked>  
<input name="pledge" id="pledge" type="radio" value="0" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);">Pledge A<br/>
<input name="pledge" id="pledge2" type="radio" value="1" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);">Pledge B<br/>
<input name="pledge" id="pledge3" type="radio" value="2"  onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);">Pledge C<br/>
<input name="pledge" id="pledge" type="radio" value="3" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);">Pledge D<br/>
<hr />
<input id="shipping_us" type="radio" name="shipping" value="-1" checked onchange="NewVal(c_iitem.shipping);" onkeyup="NewVal(c_iitem.shipping);">No Shipping<br/>
<input id="shipping" type="radio" name="shipping" value="0" onchange="NewVal(c_iitem.shipping);" onkeyup="NewVal(c_iitem.shipping);">Shipping
<hr />

Pledge $<span id="pledgeAmt">0</span>
<hr />
Shipping $<span id="shipAmt">0</span>
<hr /> 
Total $<span id="total">0</span>
</form>

您的 2 个单选按钮也使用“承诺”ID

编辑：选择发生事件的对象的一种方法是按类选择，然后使用 $(this) jquery 选择器

$(".clickMe").click(function(){
    $(this).css("background-color", "red");
});

【讨论】：

啊哈，所以问题出在“document.getElementById”上？抱歉，我将如何更正此问题以使用单独的名称？
如果您正在执行点击事件，您可以做的一件事是使用 $(this) 它将引用刚刚点击的对象，而无需通过 ID 进行检查；我将在一些代码中编辑我的答案
仅当您使用 jQuery 时。他的例子中的美元符号实际上是货币价值；）
算我瞎=P

【解决方案2】：

我实际上会进一步简化它。如果您没有对 NewVal 功能之外的 ID 执行任何操作，则可以删除 ID 属性。如果您使用它，它确实需要每个元素都是唯一的。但是，与您使用的标准 JavaScript 语法保持一致，您可以通过从 getElementsByName 循环访问对象集合并绑定 onChange 事件，将事件绑定到所有名为“pledge”的项目。然后，在它的匿名函数中，根据您的需要引用元素或值：

function NewVal(val) {
    document.getElementById('example').value=val;
}
function NewValElement(ele){
    document.getElementById('example').value=ele.outerHTML;
}
var pledges = document.getElementsByName('pledge');
for (var i = 0;i<pledges.length;i++) {
    // do something with value
    /*pledges[i].onchange=function() {
        NewVal(this.value);
    };*/
    // do something with element
    pledges[i].onchange=function() {
        NewValElement(this);
    };
}

这将使事件管理更容易，因为您不必为每个事件添加 onchange。 You don't need a keydown or anything either because the onchange is fired when the value changes for a select option or a radio group.

工作示例的小提琴：http://jsfiddle.net/9qfst/1/

输入显示元素的 HTML，以表明它具有触发事件的元素。

更新我分叉了小提琴并对其进行了一些清理，以使功能的行为方式与我认为您正在寻找可以工作的示例相同。我也查看了您的完整网站，看看您要做什么。现在，我或多或少地保留了你所拥有的东西，并重写了一些片段以清理它并使其工作。它仍然使用原始 JavaScript，而不是框架。我也有脚本进入正文元素的底部，就在关闭之前，所以我没有 onLoad 事件或任何东西。我也没有为此示例调用 UpdatePrices，因为它看起来只是将所有内容都设置为 0。

现在，从我在您所做的事情中可以看到，这可以进一步清理，并且有其他方法可以做到这一点，也可以使用 jQuery 来简化其中的一些。但是，据我所知，这似乎工作得很好。我唯一没有做的就是添加您网站上的插件。

查看此内容，如果您有更多问题，请告诉我：http://jsfiddle.net/92DJ6/2/

【讨论】：

我不知道你怎么这么快就搞定了，但谢谢你，这意味着很多。一周的挫败感在 5 分钟内解决。我会尽快测试一下
如果您对此有任何疑问，请告诉我。如果您需要更多指点或帮助，我可以帮助解释或完成。
呃。我可以调整你的例子，但很难融入我的项目，而不是我的技能。我正在尝试为 Kickstarter 构建一个计算器并按时运行，有兴趣帮助完成它吗？我真的可以使用专业人士。不要认为有很多事情要做，很乐意为您提供时间。到目前为止，这是进展情况 - originscards.com/pledge。只是我无法修补的（图像）收音机的顶层。
我更新了我的答案。我没有完全构建您在实时站点上拥有的内容，而是使用合适大小的替代方法使示例工作。如果您有更多问题或在您的项目中遇到问题，请告诉我。我认为新的小提琴更清晰一些。
哇，戴维德真漂亮，非常感谢。是的，我相信它可能比我拥有的更优雅，非常感谢你为我整理它。救生员。如果您愿意，请给我发送电子邮件