显示器2个复选框元件
问题描述:
我有一个使用类似下面显示器2个复选框元件
<Form>
<table>
<tr>
<td align="left" width="15"><input name="switch" title="0" id="radio17" value="Free Shipping" checked="checked" type="radio" />
</td>
<td>Free Shipping</td>
</tr>
<tr>
<td align="left" width="15"><input name="switch" title="38" id="radio18" value="Standard Shipping" type="radio" />
</td>
<td>Standard Shipping
</td>
</tr>
</table>
,我需要什么一个复选框形式的标题之间的数学差在价格上的差异,它是由标题标记如果免费送货选择输出应该看起来像“免费送货[+ 0]”和标准航运将看起来像“标准送货[+38]”
我刚学来的旁边显示name.So JavaScript,所以这将是首选,但任何事情会做,如果它的作品。
答
你的意思是说像this?
<form>
<label><input type="radio" name="switch" title="Free Shipping" id="freeshipping" value="0" checked="checked" type="radio" />Free Shipping</label>
<label><input type="radio" name="switch" title="Standard Shipping" id="standardshipping" value="38" />Standard Shipping</label>
<div>Selected shipping method: <span id="shippingtitle"> </span> [+<span id="shippingcost"> </span>]</div>
</form>
window.onload = function(){
var i;
for(i = 0; i < document.getElementsByName('switch').length; ++i){
document.getElementsByName('switch')[i].onclick = function(){
document.getElementById('shippingtitle').firstChild.data = this.title;
document.getElementById('shippingcost').firstChild.data = this.value;
}
}
};
label{
display:block;
float:left;
clear:left;
width:30%;
}
form{
max-width:500px;
}
看来,你只是学习JavaScript。这很好,但如果你想驾驶汽车的话,不要使用直升机(学习基本的JavaScript并在使用jQuery之前阅读关于DOM的一些信息)。
答
我会通过id访问radio元素,然后更新其父元素的同级元素的文本以包含单选按钮的“title”属性的值。例如:
function showPriceDifference(id) {
var el = document.getElementById(id)
, price = el.getAttribute('title');
el.parentElement.nextElementSibling.innerHTML += ' [+' + price + ']';
}
showPriceDifference('radio17');
showPriceDifference('radio18');
$( “输入:检查”){\t \t { VAL = parseInt函数($(本).attr( “标题”)); document.writeIn(val - parseInt(document.getElementById(“radio17”)。title)); } – BulletB 2012-03-28 19:53:47
“要显示在名称旁边”,什么名字? – 2012-03-28 19:53:48
什么HTML打印出来,即免费送货或标准配送 – BulletB 2012-03-28 19:55:14