JQuery is(':checked') not working as intended on form

Question

Edit:

Issues 1 and 2 have been resolved. Issue 3 is the only one outstanding.

Updated demo:

 jQuery(function($) {


   function addremovebtnshow() {
     if ($(".attendee").length == 1) {
       $('.remove').hide();
     } else {
       $('.remove').show();
     }
   }

   $('input[name="attendee"]').hide();
   $('.more_buttons').hide();
   addremovebtnshow();


   //show it when the checkbox is clicked
   $(document).on("click", '.check', function() {
     if ($(".check:checked").length > 0) {
       $('input[name="attendee"]').fadeIn();
       $('.more_buttons').fadeIn();
       addremovebtnshow();

     } else {
       $('input[name="attendee"]').hide();
       $('.more_buttons').fadeOut();
       addremovebtnshow();
     }
   });

   $('.add').on('click', add);
   $('.remove').on('click', remove);

   function add() {
     var new_chq_no = parseInt($('#total_chq').val()) + 1;
     var new_input = "<input type='text' placeholder='Attendee name' id='new_" + new_chq_no + "'>";
     $('#new_chq').append(new_input);
     $('#total_chq').val(new_chq_no);
   }

   function remove() {
     var last_chq_no = $('#total_chq').val();
     if (last_chq_no > 1) {
       $('#new_' + last_chq_no).remove();
       $('#total_chq').val(last_chq_no - 1);
     }
   }


 });

form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  margin: 0 auto;
}

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

<form>

  <input type="checkbox" id="event1" class="check" name="event1" value="Event 1">
  <label for="event1">Event 1</label>

  <input type="checkbox" id="event2" class="check" name="event2" value="Event 2">
  <label for="event2">Event 2</label>

  <div id="new_chq"></div>
  <!-- this one is default and cannot be removed-->
  <input type="text" name="attendee" placeholder="Attendee name"> 
  <input type="hidden" value="1" id="total_chq">

  <div class="more_buttons">
      <button class="add" type="button">+</button>
      <button class="remove" type="button">-</button>
  </div>


</form>

Here's a supporting image of what I'm trying to achieve:

I'm building a form which will have additional input's appear if some values are true and or false.

Currently I'm having 3 issues:

1. Div not fading in even though is(':checked') is true

When my checkbox with the id of #event2 is true (checked), I'm looking to fadeIn() another div which contains radio buttons. From what I've read on other stack overflow questions (namely this one), it mentions that is(':checked') is how you would determine whether a checkbox is checked, and then perform an action. So knowing this, I have the following:

  $('.coaches').hide();
  if ($('#event2').is(':checked')) {
    console.log('clicked');
    $('.coaches').fadeIn();
  }

But nothing happens, not even the console.log()

2. If either of the checkboxes are checked, I want to display textfield and buttons. But when I click one checkbox, it disappears

So, I have this one working partially. In my demo below, when you check a checkbox, it shows the textfield and button. Here are my scenario's:

Click Event 1, fields show.
Click Event 2, fields show.
Click Event 1 and then Event 2, fields show.
Click Events 1 and then Events 2 and then uncheck Events 1, fields disappear.
Click Events 1 and then Events 2 and then uncheck Events 2, fields disappear.

When either of the checkboxes are checked I want the textfields and buttons to remain. Then if no checkbox is checked, hide them.

3. When there is more than one input[name="attendee"], add <button class="remove action-button" type="button">-</button>. Currently my count approach isn't working and I think it's because my 'count' isn't going up dynamically.

var element = $('input[name="attendee"]');
var count = 0
$(".add").on("click", function(event) {
  count++;
});
console.log(count);

if (count > 1) {
  $('.remove').fadeIn();
} else {
  $('.remove').hide();
}

Demo in full:

jQuery(function($) {

  // below im trying to show the coaches div only if #event2 is true (checked).
  $('.coaches').hide(); // hide it first
  // if checked, show it
  if ($('#event2').is(':checked')) {
    console.log('clicked');
    $('.coaches').fadeIn();
  }

  // now im trying to show the textfield and add or remove buttons  if either of the checkboxes are checked.
  $('input[name="attendee"]').hide();
  $('.add').hide();
  $('.remove').hide();

  $('#event1, #event2').on('click', function() {
    if ($(this).is(':checked')) {
      $('input[name="attendee"]').fadeIn();
      $('.add, .remove').fadeIn();
    } else {
      $('input[name="attendee"]').hide();
      $('.add, .remove').hide();
    }
  });

// ADD more textfields on plus click, remove text on minus
 $('.add').on('click', add);
 $('.remove').on('click', remove);

 function add() {
   var new_chq_no = parseInt($('#total_chq').val()) + 1;
   var new_input = "<input type='text' placeholder='Attendee name' id='new_" + new_chq_no + "'>";
   $('#new_chq').append(new_input);
   $('#total_chq').val(new_chq_no);
 }

 function remove() {
   var last_chq_no = $('#total_chq').val();
   if (last_chq_no > 1) {
     $('#new_' + last_chq_no).remove();
     $('#total_chq').val(last_chq_no - 1);
   }
 }



});

form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  margin: 0 auto;
}

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


  <input type="checkbox" id="event1" name="event1" value="Event 1">
  <label for="event1">Event 1</label>

  <input type="checkbox" id="event2" name="event2" value="Event 2">
  <label for="event2">Event 2</label>

  <div id="new_chq"></div>
  <input type="text" name="attendee" placeholder="Attendee name">
  <input type="hidden" value="1" id="total_chq">

  <button class="add" type="button">+</button>
  <button class="remove" type="button">-</button>

  <div class="coaches">
  
    <label>
      <input type="radio" id="travel_yes" name="travel" value="Yes">
      <span>Yes</span>
    </label>

    <label>
      <input type="radio" id="travel_no" name="travel" value="No">
      <span>No</span>
    </label>

</div>


</form>

You're only testing if the current checkbox is checked, not whether any of them are checked. — Barmar, May 20 '20 at 23:10

mehdi354 · Accepted Answer · 2020-05-21T10:52:18.967

this code will might solve the first two issues. I am not sure about the 3rd issue because i can not understand the problem properly.Please note that have included code's for first 2 issues .

HTML:

<form>


  <input type="checkbox" class="check" id="event1" name="event1" value="Event 1">
  <label for="event1">Event 1</label>

  <input type="checkbox" class="check"  id="event2" name="event2" value="Event 2">
  <label for="event2">Event 2</label>

  <div id="new_chq"></div>
  <input type="text" name="attendee" placeholder="Attendee name">
  <input type="hidden" value="1" id="total_chq">

  <button class="add" type="button">+</button>
  <button class="remove" type="button">-</button>

  <div class="coaches">

    <label>
      <input type="radio" id="travel_yes" name="travel" value="Yes">
      <span>Yes</span>
    </label>

    <label>
      <input type="radio" id="travel_no" name="travel" value="No">
      <span>No</span>
    </label>

</div>


</form>

Jquery:

 jQuery(function($) {

      // below im trying to show the coaches div only if #event2 is true (checked).
      $('.coaches').hide(); // hide it first
      // if checked, show it
      $(document).on("click",'#event2',function(){
        if ($(this).is(':checked')) {
          console.log('clicked');
          $('.coaches').show();
          $('.coaches').fadeIn();

        }else {
          $('.coaches').fadeOut();
          $('.coaches').hide();
        }
      });


      // now im trying to show the textfield and add or remove buttons  if either of the checkboxes are checked.
      $('input[name="attendee"]').hide();
      $('.add').hide();
      $('.remove').hide();

      $(document).on("click",'.check',function(){
        if ($(".check:checked").length>0) {
          console.log('clicked');
          $('input[name="attendee"]').fadeIn();
          $('.add, .remove').fadeIn();

        }else {
          $('input[name="attendee"]').hide();
          $('.add, .remove').hide();
        }
      });


    });

Updated Code:

HTML:

<form>


  <input type="checkbox" class="check" id="event1" name="event1" value="Event 1">
  <label for="event1">Event 1</label>

  <input type="checkbox" class="check"  id="event2" name="event2" value="Event 2">
  <label for="event2">Event 2</label>

  <div id="new_chq">
    <input type="text" name="attendee" placeholder="Attendee name" class="attendee">
  <input type="hidden" value="1" id="total_chq">

  </div>


   <div id="buttons">
      <button class="add" type="button">+</button>
      <button class="remove" type="button">-</button>
   </div>

  <div class="coaches">

    <label>
      <input type="radio" id="travel_yes" name="travel" value="Yes">
      <span>Yes</span>
    </label>

    <label>
      <input type="radio" id="travel_no" name="travel" value="No">
      <span>No</span>
    </label>

</div>


</form>

JQuery:

jQuery(function($) {

      // below im trying to show the coaches div only if #event2 is true (checked).
      $('.coaches').hide(); // hide it first
      // if checked, show it
      $(document).on("click",'#event2',function(){
        if ($(this).is(':checked')) {
          console.log('clicked');
          $('.coaches').show();
          $('.coaches').fadeIn();

        }else {
          $('.coaches').fadeOut();
          $('.coaches').hide();
        }
      });


      // now im trying to show the textfield and add or remove buttons  if either of the checkboxes are checked.
   function addremovebtnshow(){
      if($(".attendee").length == 1 ) {

      $('.remove').hide();

      }else {
        $('.remove').show();
      }
     }



      $('input[name="attendee"]').hide();
      /* $('.add').hide();
      $('.remove').hide(); */
      $('#buttons').hide();
            addremovebtnshow();



      $(document).on("click",'.check',function(){
        if ($(".check:checked").length>0) {
          console.log('clicked');
          $('input[name="attendee"]').fadeIn();
          $('#buttons').fadeIn();
          addremovebtnshow();

        }else {
          $('input[name="attendee"]').hide();
          $('#buttons').fadeOut();
          addremovebtnshow();
        }
      });




      // ADD more textfields on plus click, remove text on minus
    $('.add').on('click', add);
    $('.remove').on('click', remove);

    function add() {
      var new_chq_no = parseInt($('#total_chq').val()) + 1;
      var new_input = "<input type='text' placeholder='Attendee name' class='attendee' id='new_" + new_chq_no + "'>";
      $('#new_chq').append(new_input);
    addremovebtnshow();
      $('#total_chq').val(new_chq_no);
    }

    function remove() {
      var last_chq_no = $('#total_chq').val();
      if (last_chq_no > 1) {
        $('#new_' + last_chq_no).remove();
      addremovebtnshow();
        $('#total_chq').val(last_chq_no - 1);
      }
    }


    });

Thanks! I can confirm the first two issues are working for me now. So to explain issue three, if you go onto my demo above and just check any one of the two checkboxes, you'll see three items appear. Item 1 is the the attendee name textfield and two buttons. When you click the `+` button, another text field attendee name textfield appears. The first attendee textfield is there by default (atleast one attendee needs to be defined). Any additionals, they can via hitting the `+` button. The `-` button removes the textfields one by one (except the default one). — Freddy, May 21 '20 at 00:07
I don't want the `-` button to appear unless there's more than two attendee name textfields (including the default one). Does that make sense? — Freddy, May 21 '20 at 00:08
I have updated my answer.. Please look at the code under updated answer. Hope it will work :) — mehdi354, May 21 '20 at 10:53
Hi, not quite what I'm after. I've updated my question to show an image demoing what I'm after as well as the updated code, hope that helps — Freddy, May 21 '20 at 11:33
Please look at this fiddle.. https://jsfiddle.net/mehdi354/fhca724z/ . Isn't it what you want? — mehdi354, May 21 '20 at 11:54
ah yes, forgot to add the `.attendee` class to the input type. Works now. Thank you very much! — Freddy, May 21 '20 at 12:35
HI, sorry, I have a slight bug that can be seen in your above fiddle too. So in your fiddle, if you can follow these actions: 1. Check the "Event 1" checkbox (the textfield and + button will appear). 2. Hit the + button, a new text field will appear. 3. Now, uncheck the "Event 1" checkbox, you'll notice the textfield and button still remain. I want these hidden if no checkbox is checked — Freddy, May 21 '20 at 13:32
Here is the updated fiddle : https://jsfiddle.net/mehdi354/fhca724z/3/ — mehdi354, May 21 '20 at 14:15

score 0 · Answer 2 · answered May 20 '20 at 23:39

I made a pen for you:

You can see it Here.

var countOfInputs = 0;
function add() {
  var new_input = "<input type='text' class='form-control' placeholder='Attendee name' id='new_" + countOfInputs + "'>";
  countOfInputs++;
  $('#new_chq').append(new_input);
}

function remove() {
  if (countOfInputs > 1) {
    $('#new_' + countOfInputs).remove();
    countOfInputs--;
  }
}
function toggleAttendees() {
  // doesnt matter if you add event at same time you need to check if 1 or 2 checked
  if ($('#event1').is(':checked') || $('#event2').is(':checked')) {
    $('input[name="attendee"]').fadeIn();
    $('.add, .remove').fadeIn();
  } 
  else {
    $('.add, .remove, input[name="attendee"]').hide();
  }
}

document.addEventListener('DOMContentLoaded', function() {
  $('.coaches').hide();
  $('input[name="attendee"]').hide();
  $('.add').hide();
  $('.remove').hide();

  if ($('#event2').is(':checked')) {
    console.log("event2 is already checked!")
    $('.coaches').fadeIn();
    toggleAttendees();
  }

  $('#event1, #event2').on('click', toggleAttendees);
    $('.add').on('click', add);
    $('.remove').on('click', remove);
  add();
});

If you dont want to have global vars, you can always get functions and counter inside the DOMContentLoaded function :=)

I've made some changed on it bdw :)

JQuery is(':checked') not working as intended on form

2 Answers2