读书人
栏目▼

javascript 两组radio 怎么让其在每组

发布时间： 2013-01-27 13:56:15 作者： rapoo

javascript 两组radio 如何让其在每组各有其中一个值选中时相乘得到结果 任意一组没有任何选中时报错
<form name="f1">
<p><h3>Ticket type:</h3></p>
<p><input type="radio" name="r1" value="50"/>Admission to the conference only</p>
<p><input type="radio" name="r1" value="75"/>Admission to the conference and exhibition</p>
<p><input type="radio" name="r1" value="100"/>Admission to the conference, exhibition and all screenings</p>
</form>


<form name="f3">
<p><h3>Delegate type:</h3></p>
<p><input type="radio" name="r3" value="2"/>General attendee</p>
<p><input type="radio" name="r3" value="1.5"/>Presenter</p>
<p><input type="radio" name="r3" value="1"/>Student</p>
</form> javascript
[解决办法]


<form name="f1">
<p><h3>Ticket type:</h3></p>
<p><input type="radio" name="r1" value="50" >Admission to the conference only</p>
<p><input type="radio" name="r1" value="75"/>Admission to the conference and exhibition</p>
<p><input type="radio" name="r1" value="100"/>Admission to the conference, exhibition and all screenings</p>
</form>
 
<form name="f3">
<p><h3>Delegate type:</h3></p>
<p><input type="radio" name="r3" onclick="fn1()" id="r31" value="2" >General attendee</p>
<p><input type="radio" name="r3" onclick="fn1()" id="r32"  value="1.5"/>Presenter</p>
<p><input type="radio" name="r3" onclick="fn1()" id="r33"  value="1"/>Student</p>
</form>
<button onclick="Calculation()">Calculation</button>
<script>
var inputs=document.getElementsByTagName('input'),vs=[];
for(var i=0,L=inputs.length;i<L;i++) 
inputs[i].onclick=function(){
   vs[this.name=='r1'?0:1]=this.value
}
function Calculation(){
  var error=['Ticket type','Delegate type']
   if(!vs[0]) {
      alert( 'Ticket type can not be empty');
    }else if(!vs[0]) {
      alert( 'Ticket type can not be empty');
    }else
      alert( vs[0]* vs[1])
}
</script>

[解决办法]
引用:
JavaScript code?123456789101112131415161718192021222324252627282930313233343536373839404142434445<script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/JavaScri……

怎么可能没反应呢，这个是用JQUERY写的，
<script src="http://code.jquery.com/jquery-latest.js"></script>这行一定要加上
我重新排了下版，你从新粘上试试

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript"> 
 
$(function(){
var t=0;
var f=0;
$("#abv").click(function(){
$("#div1 p :input").each(function(){
if(this.checked){
t=$(this).attr("value");
}
});
if(t==0){
alert("form1未选择选项");
return false;
}
$("#div2 p :input").each(function(){
if(this.checked){
f=$(this).attr("value");
}
});
if(f==0){
alert("form2未选择选项");
return false;
}
alert(t*f);
});
})
</script>
<input type="button" id="abv" value="测试用按钮" />
<form name="f1">
<div id="div1">
 <p><h3>Ticket type:</h3></p>
 <p><input type="radio" name="r1" value="50"/>Admission to the conference only</p>
 <p><input type="radio" name="r1" value="75"/>Admission to the conference and exhibition</p>
 <p><input type="radio" name="r1" value="100"/>Admission to the conference, exhibition and all screenings</p>
</div>
 </form>
<form name="f3">
<div id="div2">
 <p><h3>Delegate type:</h3></p>
 <p><input type="radio" name="r3" value="2"/>General attendee</p>
 <p><input type="radio" name="r3" value="1.5"/>Presenter</p>
 <p><input type="radio" name="r3" value="1"/>Student</p>
</div>
 </form>

[解决办法]
用 jquery　还要写那么多代码……
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<title>无标题文档</title>
<script type="text/javascript">
    function test() {
        var r1 = $(":radio[name=r1]:checked");
        var r3 = $(":radio[name=r3]:checked");
        if (r1.length == 0 
[解决办法]
 r3.length == 0) {
            alert("两组都必须有一个得选中");
            return;
        }

        alert(r1.val()*r3.val());
    }
</script>
</head>
<body>
<input type="button" id="btnTest" value="测试" onclick="test()" />
<form name="f1">
    <p><h3>Ticket type:</h3></p>
    <p><input type="radio" name="r1" value="50"/>Admission to the conference only</p>
    <p><input type="radio" name="r1" value="75"/>Admission to the conference and exhibition</p> 
 
    <p><input type="radio" name="r1" value="100"/>Admission to the conference, exhibition and all screenings</p>
</form>

<form name="f3">
    <p><h3>Delegate type:</h3></p>
    <p><input type="radio" name="r3" value="2"/>General attendee</p>
    <p><input type="radio" name="r3" value="1.5"/>Presenter</p>
    <p><input type="radio" name="r3" value="1"/>Student</p>
</form> 
</body>
</html>

[解决办法]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>
<form name="f1">
<p><h3>Ticket type:</h3></p>
<p><input type="radio" name="r1" value="50"/>Admission to the conference only</p>
<p><input type="radio" name="r1" value="75"/>Admission to the conference and exhibition</p>
<p><input type="radio" name="r1" value="100"/>Admission to the conference, exhibition and all screenings</p>
</form>


<form name="f3">
<p><h3>Delegate type:</h3></p>
<p><input type="radio" name="r3" value="2"/>General attendee</p>
<p><input type="radio" name="r3" value="1.5"/>Presenter</p>
<p><input type="radio" name="r3" value="1"/>Student</p>
</form>
<script type="text/javascript">
//两个form
var forms = document.getElementsByTagName("form");
//第一个form
var firstForm = forms[0];
//第二个form
var secondForm = forms[1];
//第一个form的input集合
var f1_inputs = firstForm.getElementsByTagName("input");
//第二个form的input集合
var f3_inputs = secondForm.getElementsByTagName("input");
//相乘的两个值
var f1_value =-1, f3_value =-1;
//遍历所有input绑定change事件
for(var i=0; i<f1_inputs.length; i++){
var t = this;
t.addEventListener("change",cal,false);
}
for(var i=0; i<f3_inputs.length; i++){
var t = this;
if(t.checked == true){
f3_value = t.value;
}
t.addEventListener("change",cal,false);
}
//计算
function cal(){
for(var i=0; i<f1_inputs.length; i++){
if(f1_inputs[i].checked==true){
   f1_value = Number(f1_inputs[i].value);
   }
};
for(var i=0; i<f3_inputs.length; i++){
if(f3_inputs[i].checked==true){
   f3_value = Number(f3_inputs[i].value);
   }
};
if(f1_value == -1 
[解决办法]
 f3_value == -1){
alert("not checked");
return
}
else{
alert(f1_value * f3_value);
}
}
</script> 
 
</body>

</html>

[解决办法]
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
window.onload = function cal() {
var _r1 = document.getElementsByName("r1");
var _r3 = document.getElementsByName("r3");
//单选项单击事件注册
for (var i = 0; i < _r1.length; i++) {
_r1[i].attachEvent("onclick", radioClick);
}
//单选项单击事件注册
for (var i = 0; i < _r3.length; i++) {
_r3[i].attachEvent("onclick", radioClick);
}
}
function radioClick() {
var obj = window.event.srcElement; //事件源对象
var name = obj.name; //事件源对象单选项name
var objVal = obj.value; //选中项value

//选中r1选项时，检查r3选项
if (name == "r1") {
var _r3 = document.getElementsByName("r3");
var _r3CheckedVal = "";
var _r3IsChecked = false;
for (var i = 0; i < _r3.length; i++) {
if (_r3[i].checked) {
_r3IsChecked = true;
_r3CheckedVal = _r3[i].value;
}
}
if (_r3IsChecked == false) {
alert("另一组单选项未选中。");


return;
}
else {
alert(parseFloat(objVal) * parseFloat(_r3CheckedVal));
}
}
//选中r3选项时，检查r1选项
else {
var _r1 = document.getElementsByName("r1");
var _r1CheckedVal = "";
var _r1IsChecked = false;
for (var i = 0; i < _r1.length; i++) {
if (_r1[i].checked) {
_r1IsChecked = true;
_r1CheckedVal = _r1[i].value;
}
}
if (_r1IsChecked == false) {
alert("另一组单选项未选中。");
return;
}
else {
alert(parseFloat(objVal) * parseFloat(_r1CheckedVal));
}
}
}
</script>
</head>
<body>
<form name="f1">
<p><h3>Ticket type:</h3></p>
<p><input type="radio" name="r1" value="50"/>Admission to the conference only</p>
<p><input type="radio" name="r1" value="75"/>Admission to the conference and exhibition</p>
<p><input type="radio" name="r1" value="100"/>Admission to the conference, exhibition and all screenings</p>
</form>


<form name="f3">


<p><h3>Delegate type:</h3></p>
<p><input type="radio" name="r3" value="2"/>General attendee</p>
<p><input type="radio" name="r3" value="1.5"/>Presenter</p>
<p><input type="radio" name="r3" value="1"/>Student</p>
</form>
</body>
</html>

读书人网 >JavaScript

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net