how to add and remove class using checkbox

Question

I've got a box with checkboxes and I wanted that button 'submit' appear only if one checkbox was marked, When more than one box is checked the button 'submit' must disappear, I've tried code it using addClass and removeClass provides by Jquery, here's my code for now:

$('.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>

If I may be so blunt, since you clearly only want 1 of the fields to be submitted, why are you using checkboxes? Checkboxes are typically used when the user is allowed to check more than one field. If you only want to submit when the user selected one, why not restrict the user to only being able to select one using radiobuttons? — Glubus
– Glubus, Commented Jan 8, 2016 at 12:49
@Glubus, Because my use case got this flux, When I check one checkbox the button submit have to appear, I've got to follow my use case with no exceptions, thanks for another solution. — DevRyu
– DevRyu, Commented Jan 8, 2016 at 13:03
I see, sucks that you can't suggest changes to the use case. This result will most likely inflict confusion on the users this feature will be used by. — Glubus
– Glubus, Commented Jan 8, 2016 at 13:06
Yep, but It's cool discuss about it, I'm new in front end and I wanna know more about this area. — DevRyu
– DevRyu, Commented Jan 8, 2016 at 13:12
Front end becomes increasingly more important. If you're getting into the market of online marketing, you might find the area of conversion interesting. It's the study of getting people that visit your website to actually buy stuff from you instead of just browsing. It has everything to do with your situation — Glubus
– Glubus, Commented Jan 8, 2016 at 13:15

Praveen Kumar Purushothaman · Accepted Answer · 2016-01-08 12:46:20Z

You are doing it wrong. If you want only one check box to be selected, you need to attach the event on .a, that's right. But... See the below code:

$('.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>

PeterKA · Accepted Answer · 2016-01-08 13:00:56Z

You want to toggle the submit button based on the condition $('.a:checked').length != 1

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

.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>

Collectives™ on Stack Overflow

how to add and remove class using checkbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related