如何使 onClick JS 功能仅适用于单选按钮

Question

我将formslider library 用于我网站上的一个表单，如demo 中，幻灯片会根据任何单选按钮（答案）上的点击事件移动到下一组问题。

现在，当我尝试为人们添加复选框以从表单中选择多个选项时，它不起作用。当您单击复选框而不是等待用户选择所有这些然后单击继续（输入按钮类型）时，会发生什么而不是滑块转到下一张幻灯片

我注意到库中的一个函数是 NavigateOnClick 这是它的代码。

JS 代码

this.NavigateOnClick = (function(i) {
  function n() {
     return this.onClick = r(this.('input[type="radio"]').onClick, this), this.init = r(this.init, this), n.__super__.constructor.apply(this, arguments)
  }
  return (
    o(n, i),
    (n.config = {
      actions: [
        {
          selector: ".answer",
          action: "next",
          wait: 200
        },
        {
          selector: ".next-button",
          action: "next",
          wait: 10
        },
        {
          selector: ".prev-button",
          action: "prev",
          wait: 10
        }
      ]
    }),
    (n.prototype.init = function() {
      var i, n, e, r, o;
      for (o = this.config.actions, e = 0, r = o.length; e < r; e++)
        (n = o[e]),
          (i = t(n.selector, this.container)),
          i.on("mouseup", n, this.onClick);
    }),
    (n.prototype.onClick = function(t, i) {
      if ((t.preventDefault(), !this.timeout))
        return (this.timeout = setTimeout(
          (function(i) {
            return function() {
              return i.formslider[t.data.action].call(), (i.timeout = null);
            };
          })(this),
          t.data.wait
        ));
    }),
    n
  );
})(AbstractFormsliderPlugin);

我尝试将输入类型附加到 this.onClick，但它不起作用。注意它如何选择类 .answer

为了更清楚地了解表单的外观，下面是我的 HTML 的 sn-p

HTML 代码

<div class="slide" data-role="question" data-id="9">
    <div class="headline">Choose all of the correct options</div>
    <input type="hidden" name="slides[8][question]" value="">
    <div class="answers">
        <div class="answer" data-next-id="5">
            <label class="inner-answer" for="slides[8][answer]">
                <input id="question_8_answer_" name="slides[8][answer]" value="option 1" type="checkbox">
                <div class="text">Option 1</div>
            </label>
        </div>
    </div>
</div> 

我想要实现的目标是让它只在点击输入类型单选按钮和按钮时导航，或者相反，在点击输入类型复选框和文本时不导航。

Answer 1

我认为n.config 对象中的操作选择了您的代码如何运行，您有一个带有选择器“.answer”的操作，因此任何具有 answer 类的 div 都会触发 next 操作。

将".answer" 选择器更改为'input[type="radio"]' 可能会解决您的问题。