Javascript onchange（this.value，that.value）在iPad上不起作用

Question

我有这段代码可以在PC上完美运行，但是在我的iPad上却无法运行（我认为它在任何移动设备上也无法运行）。 我已经尝试过使用Safari和Chrome，但没有任何运气。

HTML ：

<input name="Service" type="radio" value="110" onchange="update_cart(this.value, Service2.value )" />
<input name="Service" type="radio" value="111" onchange="update_cart(this.value, Service2.value )" />
<input name="Service2" type="radio" value="112" onchange="update_cart(Service.value, this.value)" />
<input name="Service2" type="radio" value="113" onchange="update_cart(Service.value, this.value)" />

JavaScript ：

function update_cart(radio1,radio2) {
    if (Service == "" || ID_Service == "") {
        document.getElementById("Cart").innerHTML = "";
        return;
    }
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        update = new XMLHttpRequest();
    } else { // code for IE6, IE5
        update = new ActiveXObject("Microsoft.XMLHTTP");
    }
    update.onreadystatechange = function() {
        if (update.readyState == 4 && update.status == 200) {
            document.getElementById("Cart").innerHTML = update.responseText;//fills Cart div with result
        }
    }
    update.open("GET", "/new/update_cart.php?radio1=" + radio1 + "&radio2=" + radio2, true);
    update.send();
}

我知道问题出在这里，因为函数update_cart仅接收具有“ this.value”但不包含其他变量的变量，例如：单击/轻按第一个单选按钮时，该函数接收（110，undefined），反之反之亦然，第二个电台（未定义，112）

我的问题是：我在这里做错了吗？ 这不应该在移动设备上工作吗？ 任何解决方法？

编辑：现在我们有4个选项，其想法是能够使用您检查的新项目更新购物车，并且每次单击另一个收音机时，它都应更新购物车。

Answer 1

除非使用诸如Angular之类的框架，否则切勿使用内联JS（例如HTML中的onchange）。 否则，它是有限的，丑陋的，并且可能有故障。

您可以通过使用库或框架来简化此工作。 像Ractive，Angular，React之类的东西可以帮助很多。

请参阅代码注释以获取解释。

 // get element references var serviceElems = document.querySelectorAll('[name="Service"]'); var service2Elems = document.querySelectorAll('[name="Service2"]'); // loop through both sets of references and attach "change" listeners [serviceElems, service2Elems].forEach(function(set) { [].forEach.call(set, function(elem) { elem.addEventListener('change', myFn); }); }); // this is fired when any of the elements are clicked function myFn() { // loop over the sets of elements, mapping values back to `vals` var vals = [serviceElems, service2Elems].map(function(set) { // find the checked element (if any) from this set var checkedElem = [].find.call(set, function(elem) { return elem.checked; }); // if one was checked, return its value (maps to vals) if (checkedElem) { return checkedElem.value; } }); updateCart(vals[0], vals[1]); } var result = document.getElementById('result'); function updateCart(radio1, radio2) { result.textContent = 'Service: '+radio1+' Service2: '+radio2; } // SHIM FOR ES6 [].find if (!Array.prototype.find) { Array.prototype.find = function(predicate) { if (this == null) { throw new TypeError('Array.prototype.find called on null or undefined'); } if (typeof predicate !== 'function') { throw new TypeError('predicate must be a function'); } var list = Object(this); var length = list.length >>> 0; var thisArg = arguments[1]; var value; for (var i = 0; i < length; i++) { value = list[i]; if (predicate.call(thisArg, value, i, list)) { return value; } } return undefined; }; } 

 <h3>Set 1</h3> <label>110</label> <input name="Service" type="radio" value="110"> <label>111</label> <input name="Service" type="radio" value="111"> <h3>Set 2</h3> <label>112</label> <input name="Service2" type="radio" value="112"> <label>113</label> <input name="Service2" type="radio" value="113"> <h3>Result</h3> <div id="result"></div> 

在AngularJS中检查一下。 借助Angular，我们鼓励您在HTML中添加逻辑。 除了您的函数调用updateCart之外，这不需要任何直接的js。

 angular.module('myApp', []) .controller('myCtrl', function($scope) { $scope.updateCart = function(radios) { console.log.apply(console, radios); }; }) ; 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl" ng-init="sets = [[110, 111], [112, 113]]; models = []"> <div ng-repeat="set in sets"> <h3>Set {{$index+1}}</h3> <div ng-repeat="item in set"> <label>{{item}}</label> <input name="Service" type="radio" ng-value="item" ng-model="models[$parent.$index]" ng-change="updateCart(models)"> </div> </div> <div id="result"> <p ng-repeat="model in models">Model {{$index+1}}: {{model}}</p> </div> </div>