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

2013-01-27

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

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

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

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