javascript - JQuery is(':checked') 在表单上没有按预期工作

问题描述

编辑：

问题 1 和 2 已解决。问题 3是唯一一个突出的问题。

更新的演示：

 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>

这是我要实现的目标的支持图像：

我正在构建一个表单，input如果某些值为真或假，则会出现额外的 ' 。

目前我有3个问题：

1.即使is(':checked')是真的，div也不会淡入

当我的 id 复选框#event2为真（选中）时，我正在寻找fadeIn()另一个div包含单选按钮的复选框。从我读到的其他堆栈溢出问题（即这个问题）中，它提到is(':checked')了您将如何确定是否选中了复选框，然后执行操作。所以知道这一点，我有以下几点：

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

但什么都没有发生，甚至没有console.log()

2. 如果选中任何一个复选框，我想显示文本字段和按钮。但是当我单击一个复选框时，它会消失

所以，我让这个部分工作。在下面的演示中，当您选中一个复选框时，它会显示文本字段和按钮。这是我的场景：

单击Event 1，字段显示。
单击Event 2，字段显示。
单击Event 1，然后Event 2显示字段。
单击Events 1，Events 2然后取消选中Events 1，字段消失。
单击Events 1，Events 2然后取消选中Events 2，字段消失。

当检查任一复选框时，我希望保留Textfield和按钮。然后，如果没有选中复选框，则隐藏它们。

3. 多于一个input[name="attendee"]时，添加<button class="remove action-button" type="button">-</button>。目前我的count方法不起作用，我认为这是因为我的“计数”没有动态增加。

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

完整演示：

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>

标签： javascripthtmljquerycsscheckbox

解决方案

此代码可能会解决前两个问题。我不确定第三个问题，因为我无法正确理解问题。请注意，前两个问题的代码已包含在内。

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


    });

更新代码：

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


    });

javascript - JQuery is(':checked') 在表单上没有按预期工作

问题描述

解决方案

推荐阅读