如何使用复选框

Question

我有一个带复选框的框，我希望只有在标记了一个复选框时才显示“提交”按钮。当选中多个框时，“提交”按钮必须消失，我尝试使用addClass编写代码和removeClass由Jquery提供，这是我现在的代码：

$('.a').click(function() {
  $('.c').removeClass('b');
});

.b {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkbox">
  <form method="post">
    <fieldset>
      <legend>What is Your Favorite Pet?</legend>
      <input type="checkbox" name="animal" value="Cat" class="a" />Cats
      <br />
      <input type="checkbox" name="animal" value="Dog" class="a" />Dogs
      <br />
      <input type="checkbox" name="animal" value="Bird" class="a" />Birds
      <br />
      <input type="submit" value="Submit now" class="c b" />
      <button>Cancel</button>
    </fieldset>
  </form>
</div>

Answer 1

你做错了。如果您只想选中一个复选框，则需要在.a上附加事件，这是正确的。但是......请参阅以下代码：

$('.a').click(function() {
  if ($(".a:checked").length == 1)
    $('.c').removeClass('b');
  else
    $('.c').addClass('b');
});

.b {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkbox">
  <form method="post">
    <fieldset>
      <legend>What is Your Favorite Pet?</legend>
      <input type="checkbox" name="animal" value="Cat" class="a" />Cats
      <br />
      <input type="checkbox" name="animal" value="Dog" class="a" />Dogs
      <br />
      <input type="checkbox" name="animal" value="Bird" class="a" />Birds
      <br />
      <input type="submit" value="Submit now" class="c b" />
      <button>Cancel</button>
    </fieldset>
  </form>
</div>

Answer 2

您想根据条件$('.a:checked').length != 1

切换$('.a').on('change', function () { $('.c').toggleClass('b', $('.a:checked').length != 1); });按钮

＆＃13;

＆＃13;

.b {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkbox">
  <form method="post">
    <fieldset>
      <legend>What is Your Favorite Pet?</legend>
      <input type="checkbox" name="animal" value="Cat" class="a" />Cats
      <br />
      <input type="checkbox" name="animal" value="Dog" class="a" />Dogs
      <br />
      <input type="checkbox" name="animal" value="Bird" class="a" />Birds
      <br />
      <input type="submit" value="Submit now" class="c b" />
      <button>Cancel</button>
    </fieldset>
  </form>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;