Question

我的javascript函数在Chrome / Firefox与Safari / Opera中的评价方式不同。关于我的显示/隐藏总体目标，有很多答案（即here）。我不想在这种情况下使用jQuery。无论如何，我想解决的主要问题是条件码并没有在所有浏览器中返回相同的内容。

如果我在Chrome或Firefox中运行我的代码，我会收到警告：＆＃34; Foo - 新功能Ran。＆＃34; 如果我在Safari或Opera中运行相同的代码，我会收到警报：＆＃34; Foo - Else Function Ran。＆＃34;

我不知道为什么这是浏览器特定的。如果在其他地方解决这个问题，我很高兴能够阅读其他一些主题或文档，但我似乎无法解决这个问题。

//编辑：每个请求，代码简化为仅显示相关部分。

＆＃13;

function bar(){
	var addGiftVal = document.forms["subscribe"]["addGift"].value;

	if (addGiftVal == "yes"){
		alert("Bar - Yes Function Ran.");
	}
	
	else {
		alert("Bar - Else Function Ran.");
	}

}

function foo(){
	var subTypeVal = document.forms["subscribe"]["sub_type"].value;
	var subShipVal = document.forms["subscribe"]["ship_address_check"].value;

	if (subTypeVal == "renewal"){
		alert("Foo - Renewal Function Ran.");
		}
	
	else if (subTypeVal == "new"){
		alert("Foo - New Function Ran.");
		}
	
	else {
		alert("Foo - Else Function Ran.");
		}
		
}

＆＃13;

<body onLoad="foo();">

<form name="subscribe" id="subForm">
<p><input type="radio" name="sub_type" value="new" id="subf_new" checked="checked" onclick="foo();"> <label for="subf_new">New</label>  
<input type="radio" name="sub_type" value="renewal" id="subf_renewal" onclick="foo();"> <label for="subf_renewal">Renewal</label>   
<input type="radio" name="sub_type" value="gift" id="subf_gift" onclick="foo();"> <label for="subf_gift">Gift</label>    </p>

<p><input type="radio" name="ship_address_check" id="subf_same" value="same" checked="checked"  onclick="foo();"><label for="subf_same">Same</label> </p>
<p><input type="radio" name="ship_address_check" id="subf_different" value="different"  onclick="foo();"><label for="subf_different">Different</label> </p>

<p>Yes or No?</p>
<input type="radio" name="addGift" id="subf_yes" value="yes" onclick="bar();"><label for="subf_yes">Yes</label> 
<input type="radio" name="addGift" id="subf_no" value="no" onclick="bar();"><label for="subf_no">No</label> 

<div id="submitBox"><input type="submit" value="Submit">
</form>

</body>

＆＃13;

Answer 1

document.forms["subscribe"]["sub_type"]为您提供了一系列元素，而不仅仅是所选元素。 Chrome似乎允许您在此集合上调用.value并获取所选值，但某些浏览器不会（我没有Safari，但IE也会失败）。无论如何，在集合上调用.value并不是正确的方法。

您可以通过调用

来查看此操作

document.forms["subscribe"]["sub_type"]

和

document.forms["subscribe"]["sub_type"].value

从您的浏览器开发工具控制台。

您需要使用策略from these answers来正确获取已检查的值。如果您不使用jQuery，那么您必须通过遍历整个组来查找已选中的组，或者如果您不关心旧浏览器，则使用querySelector。

$("[name=sub_type]:checked").val()
// or
document.querySelector("[name=sub_type]:checked").value
// or
var theValue;
var elems = document.getElementsByName("sub_type");
for (var i = 0; i < elems.length; ++i) {
    if (elems[i].checked) {
        theValue = elems[i].value;
        break;
    }
}

Answer 2

问题是你没有通过＆＃34;这个＆＃34;到功能。尝试打印出subTypeVal的值，看看我的意思 - 你会注意到在Safari中，这会返回一个HTML元素列表，而在Chrome中，它（正确或不正确）会推断你想要点击的元素。

要解决这个问题，请通过＆＃34;这个＆＃34;进入你的功能：

＆＃13;

<input type="radio" name="sub_type" value="renewal" id="subf_renewal" onclick="foo(this);"><label for="subf_renewal">Renewal</label>

＆＃13;

并在您的javascript中，将一个参数添加到您的＆＃34; foo＆＃34;功能：

＆＃13;

function foo(myButton)

＆＃13;

并使用

＆＃13;

var subTypeVal = myButton.value;

＆＃13;

代替。

请在此处查看jsFiddle：http://jsfiddle.net/fprfk146/2/

IF在Chrome中返回True，但在Safari中返回False

2 个答案: