javascript - JavaScript 重构未按预期工作

Question

我有这段重复的代码可以切换我的 2 单选按钮$(document).ready()：

$(document).ready(function () {
    $("#New").click(function () {
        var toggleOn = $("#New");
        var toggleOff = $("#Used");
        var value = true;

        toggleOn.prop("checked", value);
        toggleOn.val(value);
        toggleOff.prop("checked", !value);
        toggleOff.val(!value);
    });

    $("#Used").click(function () {
        var toggleOn = $("#Used");
        var toggleOff = $("#New");
        var value = true;

        toggleOn.prop("checked", value);
        toggleOn.val(value);
        toggleOff.prop("checked", !value);
        toggleOff.val(!value);
    });
});

我不想重复代码，所以我将它重构为一个函数：

$(document).ready(function () {
    $("#Used").on("click", toggleRadioButtons("Used", "New"));
    $("#New").on("click", toggleRadioButtons("New", "Used"));
});

function toggleRadioButtons(radioOne, radioTwo) {
    var toggleOn = $("#" + radioOne);
    var toggleOff = $("#" + radioTwo);
    var value = true;

    toggleOn.prop("checked", value);
    toggleOn.val(value);
    toggleOff.prop("checked", !value);
    toggleOff.val(!value);
}

所以问题是，使用重构的代码，单选按钮不再正确地取消选中另一个单选按钮。我假设它与 JavaScript 闭包有关，但我不确定这将如何应用，因为我在它的外部范围内调用了一个函数。

标签： javascriptjquery

Answer 1

如果您将两个单选按钮设置为相同name，则一次只能选择一个。

根本不需要 jQuery。

form {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  grid-column-gap: 2em;
}

<form name="car">
  <label>New  <input type="radio" name="condition" value="new" /></label>
  <label>Used <input type="radio" name="condition" value="used" /></label>
</form>

如果您希望它们成为复选框，您可以将它们与 jQuery 插件链接。我打电话给它syncCheckboxes，代码可以在下面找到。

(function($) {
  $.syncCheckboxes = function(...ids) {
    const $checkboxes = ids.map(id => $(id));
    $checkboxes.forEach(function($checkbox) {
      $checkbox.on('click', function(e) {
        if ($(this).prop('checked')) {
          $checkboxes.forEach(function($curr) {
            $curr.prop('checked', $curr === $checkbox);
          });
        }
      })
    });
  };
})(jQuery);

$.syncCheckboxes('#New', '#Used');

form {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  grid-column-gap: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="car">
  <label>New  <input type="checkbox" id="New"  value="new" /></label>
  <label>Used <input type="checkbox" id="Used" value="used" /></label>
</form>