转换js选择单选按钮？

时间：2013-11-18 20:51:51

标签： jquery select onchange radio

我正在尝试将带有onchange功能的Select菜单转换为单选按钮。但我不是程序员。这里的例子有两套，选择工作，收音机不。我认为处理'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>

2 个答案:

答案 0 :(得分：0)

我首先要更改ID字段，你必须使用单独的名称，目前唯一的byID字段，你将得到＆＃34;承诺＆＃34;是选择器元素

<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个单选按钮使用＆＃34;承诺＆＃34; id也是

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

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

答案 1 :(得分：0)

我实际上会进一步简化它。如果您没有对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。您不需要keydown或其他任何东西，因为当选择选项或无线电组的值更改时会触发onchange。

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

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

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

现在，可以从我正在做的事情中看到更多的东西，还有其他方法可以做到这一点，以及使用jQuery简化其中的一些方法。但是，据我所知，这似乎工作得很好。我唯一没做的就是添加你网站上的AddOns。

检查一下，如果您有更多问题，请与我们联系：http://jsfiddle.net/92DJ6/2/

相关问题
最新问题