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 )，反之亦然，用于第二个收音机 (undefined,112)

我的问题是：我在这里做错了吗？这不应该在手机上工作吗？有什么解决方法吗？

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

Answer 1

永远不要使用内联 JS（例如 HTML 中的 onchange），除非您使用的是可以理解它的框架，例如 Angular。否则，它是有限的、丑陋的，并且可能有问题。

您可以通过使用库或框架来使其更轻、更简洁。诸如 Ractive、Angular、React 之类的东西很有帮助。

解释见代码 cmets。

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