jQuery: если флажок установлен, удалить часть формы

Question

Я пытаюсь создать форму с функцией, когда кто-то проверяет ввод или ввод с помощью классов .badCheckbox, .badCheckbox2, .badCheckbox3 fieldset с идентификатором goodField из формы будет удалено и fieldset с идентификатором badField будет добавлено. Если кто-то снимает флажок с упомянутыми классами, удаленный fieldset с идентификатором goodField формы будет показан снова и добавлен fieldset badField будет удалено. Я пытался что-то подобное, но не работает. Кроме того, я попробовал это с дисплеем: блок и ничего и снова и снова не работает.

My jQuery:

$('.badCheckbox, .badCheckbox2, .badCheckbox3').change(function(){
    if(this.checked){
        $('#badField').appendTo( "form" );
        $('#goodField').detach();
    } else {
        $('#badField').detach()
        $('#goodField').appendTo( "form" );
    }
});

My HTML:

<form>
    <input class="badCheckbox" type="checkbox"/>
    <input class="badCheckbox2" type="checkbox"/>
    <input class="badCheckbox3" type="checkbox"/>
    <fieldset id="badField">
        <p>Sorry:(</p>
        <button type="submit">Submit</button>
    </fieldset>
    <fieldset id="goodField">
        <p>Nice!!!</p>
        <button type="submit">Submit</button>
    </fieldset>
</form>

Answer 1

Это то, что вы ищете? ↓↓

$('.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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form> 
  <input class="badCheckbox" type="checkbox" /> 
  <input class="badCheckbox" type="checkbox" /> 
  <input class="badCheckbox" type="checkbox" />
  <fieldset id="badField" style="display:none;">
    <p>Sorry:(</p> <button type="submit">Submit</button> </fieldset>
  <fieldset id="goodField">
    <p>Nice!!!</p> <button type="submit">Submit</button> </fieldset>
</form>

Answer 2

Это то, что вы хотели? Вам нужен только один класс для этого badCheckbox, поскольку все они делают то же самое, если я вас правильно понимаю. И дисплей блока ни один не работает просто отлично.

$(document).ready(function(){
   $('.badCheckbox').change(function () {
   if (this.checked) {
             $("#goodField").css("display", "none");
             $("#badField").css("display", "block");
         }
         else {
             $("#goodField").css("display", "block");
             $("#badField").css("display", "none");
         }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <input class="badCheckbox" type="checkbox"/>
    <input class="badCheckbox" type="checkbox"/>
    <input class="badCheckbox" type="checkbox"/>
    <fieldset id="badField" style="display:none">
        <p>Sorry:(</p>
        <button type="submit">Submit</button>
    </fieldset>
    <fieldset id="goodField" style="display:block">
        <p>Nice!!!</p>
        <button type="submit">Submit</button>
    </fieldset>
</form>