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

Question

Я пытаюсь создать форму, которая будет скрывать и показывать некоторые части формы. Это работает правильно в некоторых попытках. Но когда пользователь выбирает и проверяет параметр с классом badCheckbox , который показывает badField , впоследствии пользователь проверяет параметр без класса badCheckbox , который должен показывать 'goodField' чем ' badField 'не скрывается и по-прежнему отображается.

И когда пользователь пытается проверить опции по отдельности, все работает правильно только в верхнем упомянутом регистре.

Есть ли способ сделать это?

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

вот короткая версия

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

Прежде всего, очевидно, ваши флажки должны вести себя как рад ios. Как я понимаю, это то, что вы хотите сделать. Итак, я немного изменил ваш скрипт, чтобы сделать так, чтобы флажки работали как радиовходы, и в то же время, чтобы показать / скрыть абзац, в зависимости от того, имеет ли элемент, на который щелкнули мышью, класс badCheckbox и его состояние (проверено или нет). Вот результат:

//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();
   }

});

Вот пример рабочего кода в CodePen: https://codepen.io/kalatchev/pen/gOpJBOv

Answer 3

Рассмотрим следующие улучшения.

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

это потому, что у вас нет события, когда пользователь щелкает и третий флажок.

Ваша функция показать / скрыть сообщение работает, когда есть обновление (изменение) на входе с классом .badCheckbox но когда вы нажимаете на третий (где нет класса), ваша функция не вызывается.

Я думаю, что вы должны иметь класс на всех ваших флажках и использовать его в своей функции, которая выдает изменения .

Примерно так:

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

И ваш 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"/>

Существует много возможностей для оптимизации вашего кода, например использование радио для удаления вашей функции oneChecked или печать правильного сообщения, когда флажок установлен, вместо использования показать / скрыть два div, но я думаю, что вы должны увидеть это в будущем

Я надеюсь, что это может помочь вам и добро пожаловать в StackOverflow