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" 而不是另一个的变量，例如：当 click/tap 在第一个radio 函数接收 (110,undefined)，反之亦然，第二个 radio (undefined,112)

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

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

Answer 1

永远不要使用内联 JS（比如 HTML 中的 onchange），除非你使用的是框架，比如 Angular，它是有意义的。否则，它是有限的、丑陋的，并且可能存在错误。

您可以使用库或框架使它更轻巧、更简洁。像 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 中有逻辑。这不需要任何直接的 js，除了你的函数调用 updateCart.

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>

Javascript onchange(this.value, that.value) 在 ipad 上不工作

Javascript onchange(this.value, that.value) not working on ipad

javascript

php

safari

jquery

google-chrome