javascript 两组radio 如何让其在每组各有其中一个值选中时相乘得到结果 任意一组没有任何选中时报错

Question

<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

Answer 1

<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> 

Answer 2

我写了一段 问题出在哪里呢 function getRadioValue() {
            
            var len = document.getElementsByName("r1");
            for (var i = 0; i < len.length; i++) {
                if (len[i].checked) {
                    radio1 = len[i].value;
                    chk1 = true;
                    break;
                }

  }
            } function getRadioValue2() {
            
            var len = document.getElementsByName("r3");
            for (var i = 0; i < len.length; i++) {
                if (len[i].checked) {
                    radio2 = len[i].value;
                    chk3 = true;
                    break;
                }

  }
            }
                   

          function Calculation() {
  
  getRadioValue();
  getRadioValue2();
  
          if (chk1||chk3){
   alert (radio1*radio2);
  }
  else {
  alert ("please");
  }
    
  
  }    

Answer 3

<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>

Answer 4

怎么可能没反应呢，这个是用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> 

Answer 5

var radio1,radio2;  //原来你变量未定义
function getRadioValue() {
......
 

Answer 6

用 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>

Answer 7

<!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>

Answer 8

4楼有BUG改了 <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>
<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]=this.value
}
function Calculation(){
   if(!vs['r1'] ) {
      alert( 'Ticket type can not be empty');
    }else if(!vs['r3']) {
      alert( 'Ticket type can not be empty');
    }else
      alert( vs['r1']* vs['r3'])
}
</script>

Answer 9

<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>