javascript - 使用 JQuery 检查表单

Question

我正在尝试做一个小项目，但我不知道该怎么做。我的 JQuery 正在影响这两种形式。

$(document).ready(function() {
  $("input[value='wrong']").click(function() {

    $(this).parent()
    .addClass("wrong")
    .siblings().removeClass("right wrong");

    //$("input[type='checkbox']").prop('checked', true);
    $(this).prop('checked', true);
  });

  $("input[value='right']").click(function() {
    $(this).parent()
    .addClass("right")
    .siblings().removeClass("right wrong");

    $("input[type='checkbox']").prop('checked', true);
  });

  $("input[type='checkbox']").click(function() {
    $(this).parent()
    .siblings().removeClass("right wrong");

    $("input[type='radio']").prop('checked', false);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form3">
  <fieldset>
    <legend>Form 1</legend>
    <label class="option"><input type="radio" name="option" value="wrong" class="option1">A</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option2">B</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option3">C</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option4">D</label>
    <label class="option"><input type="radio" name="option" value="right" class="option5">E</label>
    <br />
    <label class="switch">
      <input type="checkbox">
      <div class="slider"></div>
    </label>
  </fieldset>
</form>


<form class="form3">
  <fieldset>
    <legend>Form 2</legend>
    <label class="option"><input type="radio" name="option" value="wrong" class="option1">A</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option2">B</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option3">C</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option4">D</label>
    <label class="option"><input type="radio" name="option" value="right" class="option5">E</label>
    <br />
    <label class="switch">
      <input type="checkbox">
      <div class="slider"></div>
    </label>
  </fieldset>
</form>

我想知道每当我从第一个表单中选择一个 radio 时如何让它检查第一个复选框，如果我取消选中第一个复选框，它将取消选中第一个表单中选中的 radio 。对于第二种形式，同样的事情不会影响两种形式。

Answer 1

我建议您优化代码并将逻辑分成两个 block ( fiddle )。您最终会增加事件监听器，但此代码遵循 Separation of concerns原则允许更好的支持和可重用性。
此代码还使 checkbox-radios 链接不依赖于标记，这也是一件好事。您甚至可以通过做一些小的调整来继续制作 jQuery 插件，但目前它超出了范围。

第一个区 block

负责处理“正确”和“错误”的类；

// find all inputs
$('input')
    // take only those with value set to 'right' or 'wrong'
    .filter(function() {
        return ['right', 'wrong'].indexOf($(this).val()) !== -1
    })
    // bind to the change event
    .on('change', function() {
        var $this = $(this);

        $this
            .parent()
            // set the parent class - right or wrong,
            // depending on this input's value
            .addClass($this.val())
            // remove classes from siblings
            .siblings()
            .removeClass('right wrong');
    })

$('input[type="checkbox"]').on('change', function() {
    $(this).closest('form').find('label').removeClass('right wrong');
});

第二 block

负责链接复选框和单选按钮

// find all checkboxes with data-radio-link attribute set
$('input[type="checkbox"][data-radio-link]')
    // for each found checkbox
    .each(function() {
        var $this = $(this);

        // find all the linked radios using
        // the query from data-radio-link attribute
        var linkedRadios = $($this.data().radioLink);

        // remember those radios for future use
        $this.data('linkedRadios', linkedRadios)

        // check the checkbox when
        // any radio becomes checked
        linkedRadios.on('change', function() {
            if ($(this).prop('checked')) {
                $this.prop("checked", true);
            }
        });
    })
    // when the user changes checkbox value
    .on('change', function() {
        var $this = $(this);

        // if it becomes unchecked
        if (!$this.prop("checked")) {
            // find the linked radios that is checked and uncheck it
            $this.data().linkedRadios.filter(':checked').prop('checked', false);
        }
    });

HTML

<input type="checkbox" data-radio-link="#form-1 input[name='option']"/>