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>