js 判断 选择合适的 Radio
本来觉得要做这个很麻烦 几天没有思路去碰 今天终于想到了......直接解决
页面截图：
页面设计代码：
<div class="Pay02">
<div class="Pay03">
<div class="Pay04">月<img src="images/bg_blank04.gif" />付：</div>
<div class="Pay05"><input name="rent" type="radio" id="1" onclick="PtypeChecked()" value="押一付一"/></div><div class="Pay06">押一付一</div>
<div class="Pay05"><input name="rent" type="radio" id="1" onclick="PtypeChecked()" value="押一付二"/></div><div class="Pay06">押一付二</div>
<div class="Pay05"><input name="rent" type="radio" id="1" onclick="PtypeChecked()" value="押一付三"/></div><div class="Pay06">押一付三</div>
</div>
<div class="Pay03">
<div class="Pay04">季<img src="images/bg_blank04.gif" />付：</div>
<div class="Pay05"><input name="rent" type="radio" id="2" onclick="PtypeChecked()" value="无押付三"/></div><div class="Pay06">无押付三</div>
<div class="Pay05"><input name="rent" type="radio" id="2" onclick="PtypeChecked()" value="押一付三"/></div><div class="Pay06">押一付三</div>
<div class="Pay05"><input name="rent" type="radio" id="2" onclick="PtypeChecked()" value="押二付三"/></div><div class="Pay06">押二付三</div>
<div class="Pay05"><input name="rent" type="radio" id="2" onclick="PtypeChecked()" value="押三付三"/></div><div class="Pay06">押三付三</div>
</div>
<div class="Pay03">
<div class="Pay04">半年付：</div>
<div class="Pay05"><input name="rent" type="radio" id="3" onclick="PtypeChecked()" value="无押付半年"/></div><div class="Pay06">无押付半年</div>
<div class="Pay05"><input name="rent" type="radio" id="3" onclick="PtypeChecked()" value="押一付半年"/></div><div class="Pay06">押一付半年</div>
<div class="Pay05"><input name="rent" type="radio" id="3" onclick="PtypeChecked()" value="押三付半年"/></div><div class="Pay06">押三付半年</div>
</div>
<div class="Pay03">
<div class="Pay04">年<img src="images/bg_blank04.gif" />付：</div>
<div class="Pay05"><input name="rent" type="radio" id="4" onclick="PtypeChecked()" value="无押年付"/></div><div class="Pay06">无押年付</div>
<div class="Pay05"><input name="rent" type="radio" id="4" onclick="PtypeChecked()" value="押一年付"/></div><div class="Pay06">押一年付</div>
<div class="Pay05"><input name="rent" type="radio" id="4" onclick="PtypeChecked()" value="押二年付"/></div><div class="Pay06">押二年付</div>
</div>
<div class="Pay03">
<div class="Pay04">其<img src="images/bg_blank04.gif" />他：</div>
<div class="Pay05"><input name="rent" type="radio" id="5" onclick="PtypeChecked()" value="面议"/></div><div class="Pay06">面议</div>
<input id="hide2" type="hidden" runat="server" value="0" />
</div>
</div>
也不知道别人做的话会不会用服务器控件的RadioButtonList 感觉那个不好用 至少用在这里不合适 最主要是布局 多个RadioButtonList 的话就要判断 选择了一个true 其他的就要自动选择false 还不如用raido 设置一样的name 同类的设置相同的id 虽然一个id一个页面中只能出现一次但是我这样用确实解决了问题 而且没有出现错误 反正先用着吧
数据库存入的图：
发布页面是用js代码如下：
function PtypeChecked()
{
var hides=document.getElementById("hide2");
switch(event.srcElement.id)
{
case "1":
hides.value="月付--："+ event.srcElement.value;
break;
case "2":
hides.value="季付--："+ event.srcElement.value;
break;
case "3":
hides.value="半年付--："+event.srcElement.value;
break;
case "4":
hides.value="年付--"+event.srcElement.value;
break;
case "5":
hides.value=event.srcElement.value;
break;
}
}
存hides的值入数据库
从数据库里读出的时候 判断文字 然后将对应的radio选中 js代码如下：
<script language="javascript" type="text/javascript">
var payType="<%=PayType%>";//数据库中读出的数据
var Rb=document.getElementsByTagName("INPUT")
function GetType()
{
if(payType.indexOf("面")>=0)
{
document.getElementById("5").checked=true;
}
else
{
for(var i=0;i<Rb.length;i++)
{
if(payType.indexOf(Rb[i].value)>=0)//比对radio的值和数据库里读出的数据
{
Rb[i].checked=true;
}
}
}
}
</script>
思路：获取页面所有的radio 比对radio的值和数据库里读出的数据 如果有对应的 就选择该项 完成！！！
突然发现有问题 月付 季付的radio会有一样的value 于是继续修改
直接改value：
<div class="Pay03">
<div class="Pay04">月<img src="images/bg_blank04.gif" />付：</div>
<div class="Pay05"><input name="rent" type="radio" id="1" onclick="PtypeChecked()" value="月付--押一付一"/></div><div class="Pay06">押一付一</div>
<div class="Pay05"><input name="rent" type="radio" id="1" onclick="PtypeChecked()" value="月付--押一付二"/></div><div class="Pay06">押一付二</div>
<div class="Pay05"><input name="rent" type="radio" id="1" onclick="PtypeChecked()" value="月付--押一付三"/></div><div class="Pay06">押一付三</div>
</div>
<div class="Pay03">
<div class="Pay04">季<img src="images/bg_blank04.gif" />付：</div>
<div class="Pay05"><input name="rent" type="radio" id="2" onclick="PtypeChecked()" value="季付--无押付三"/></div><div class="Pay06">无押付三</div>
<div class="Pay05"><input name="rent" type="radio" id="2" onclick="PtypeChecked()" value="季付--押一付三"/></div><div class="Pay06">押一付三</div>
<div class="Pay05"><input name="rent" type="radio" id="2" onclick="PtypeChecked()" value="季付--押二付三"/></div><div class="Pay06">押二付三</div>
<div class="Pay05"><input name="rent" type="radio" id="2" onclick="PtypeChecked()" value="季付--押三付三"/></div><div class="Pay06">押三付三</div>
</div>
js也修改：
function PtypeChecked()
{
var hides=document.getElementById("hide2");
hides.value=event.srcElement.value;
}
<script language="javascript" type="text/javascript">
var payType="<%=PayType%>";
var Rb=document.getElementsByTagName("INPUT")
function GetType()
{
if(payType.indexOf("面")>=0)
{
document.getElementById("5").checked=true;
}
else
{
for(var i=0;i<Rb.length;i++)
{
if(payType==Rb[i].value)
{
Rb[i].checked=true;
}
}
}
}
</script>
这下真是彻底了 就是不知道这个value改成这么长一串会不会有问题
