Remove part of form when checkbox is checked

Question

I'm trying to make a form that will hide and show some parts of the form. It working correctly in some tries. But when the user chooses and checks an option with class badCheckbox which is showing badField subsequently then user checks option without class badCheckbox which should showing 'goodField' than 'badField' is not hiding and still is shown.

And when a user tries to check options separately all work correctly only in upper mentioned case.

Is there any way to do it?

//Script to hide and show div
$('.badCheckbox').change(function() {
  let checked = 0;
  $('.badCheckbox').each(function() {
    if (this.checked) {
      checked += 1;
    }
  });
  if (checked != 0) {
    $('#badField').show();
    $('#goodField').hide();
  } else {
    $('#badField').hide();
    $('#goodField').show();
  }
});

//script to check only one of three
$(".oneChecked").on('click', function() {
  // in the handler, 'this' refers to the box clicked on
  var $box = $(this);
  if ($box.is(":checked")) {
    var group = "input:checkbox[name='" + $box.attr("name") + "']";
    $(group).prop("checked", false);
    $box.prop("checked", true);
  } else {
    $box.prop("checked", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input name="checkin" type="checkbox" class="oneChecked badCheckbox" />
<input name="checkin" type="checkbox" class="oneChecked badCheckbox" />
<input name="checkin" type="checkbox" class="oneChecked" />

<div id="badField" style="display:none;">
  <p>:((</p>
  <input type="submit" />
</div>

<div id="goodField">
  <p>NICE!!!</p>
  <input type="submit" />
</div>

Answer 1

here is a short version

$('#checks').on('change', 'input[name="checkin"]', function (){

    if( $(this).is(':checked') ){
        $('#checks .oneChecked:checked').prop('checked', false);
        $(this).prop('checked', true);
    } else {
        $('#checks .oneChecked:checked').prop('checked', false);
        $(this).prop('checked', false);
    }

    if( $('#checks .badCheckbox:checked').is(':checked') ){
        $('#badField').show();
        $('#goodField').hide();
    } else {
        $('#badField').hide();
        $('#goodField').show();
    }
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="checks">
    <input name="checkin" type="checkbox" class="oneChecked badCheckbox"/>
    <input name="checkin" type="checkbox" class="oneChecked badCheckbox"/>
    <input name="checkin" type="checkbox" class="oneChecked"/>
</div>
    <div id="badField" style="display:none;">
      <p>:((</p>
      <input type="submit"/>
    </div>

    <div id="goodField">
      <p>NICE!!!</p>
      <input type="submit"/>
    </div>

Answer 2

First of all, obviously your checkboxes have to act like radios. As I understand, that is what you want to do. So, I modifyed your script a little bit to make checkboses to act as they are radio inputs, and in the same time to show/hide paragraph, depending on if clicked element has class badCheckbox and it's state (checkd or not). Here is the result:

//Script to hide and show div
$('.oneChecked').click( (everyOne) => {
   //handles click (and change) on every element with class oneChecked
   //they all has it in your example
   $('.oneChecked').each( (ind, currentOne) => {
     //iterate to all elements with class oneChecked
     //and compare if matches clicked one
     if ( !$(currentOne).is($(everyOne.target)) ) {
       //other instance, not clisked one, so clear it
       //to simulate behaviour of radio input
       $(currentOne).prop('checked', false);
     }
   });

   //checks if clicked element is bad or not and show/hide your p
   if ($(everyOne.target).hasClass('badCheckbox') && $(everyOne.target).prop('checked')){
     console.log('b-s/h');
        $('#badField').show();
        $('#goodField').hide();
     } else {
     console.log('s/b-h');
       $('#badField').hide();
       $('#goodField').show();
   }

});

Here is an workign example in CodePen: https://codepen.io/kalatchev/pen/gOpJBOv

Answer 3

Consider the following improvements.

$(function() {
  function checkStuff(checked) {
    if (checked) {
      $('#badField').show();
      $('#goodField').hide();
    } else {
      $('#badField').hide();
      $('#goodField').show();
    }
  }

  //script to check only one of three
  $(".boxes").on('change', ".oneChecked", function() {
    if ($(this).is(":checked")) {
      $(".boxes input[type='checkbox']").prop("checked", false);
      $(this).prop("checked", true);
      checkStuff($(this).is(".badCheckbox"));
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boxes">
  <input name="checkin" type="checkbox" class="oneChecked badCheckbox" />
  <input name="checkin" type="checkbox" class="oneChecked badCheckbox" />
  <input name="checkin" type="checkbox" class="oneChecked" />
</div>

<div id="badField" style="display:none;">
  <p>:((</p>
  <input type="submit" />
</div>

<div id="goodField">
  <p>NICE!!!</p>
  <input type="submit" />
</div>

Answer 4

it's because you don't have an event when user click and the third checkbox.

Your function to show/hide message work when there are an update (change) on an input with the class .badCheckbox but when you click on the third (where doesn't have the class) your function is not called.

I think you should have a class on all your checkbox and use it in your function who lister the change.

Something like this :

$('.checkbox').change(function() {
    let checked = 0;
    $('.badCheckbox').each(function() {
      // ...
});

And your html

<input name="checkin" type="checkbox" class="checkbox oneChecked badCheckbox"/>
<input name="checkin" type="checkbox" class="checkbox oneChecked badCheckbox"/>
<input name="checkin" type="checkbox" class="checkbox oneChecked"/>

There is a lot of optimization that can be done to improve your code, like using the radio to remove your oneChecked function or printing the right message when the checkbox is checked instead of using show/hide two div but i think you should see it in the future

I hope this can help you and welcome to StackOverflow