堆栈内存溢出
  繁体   English   中英

JQuery is(':checked') 未按表单上的预期工作

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

 原文  2020-05-20 23:07:20  0   2    javascript/ html/ jquery/ css/ checkbox

问题描述

编辑：

问题 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>

2 个解决方案

解决方案1
 1 已采纳  2020-05-20 23:32:33

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

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


    });

更新代码：

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


    });

解决方案2
 0  2020-05-20 23:39:56

我为你做了一支笔：

你可以在这里看到它。

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

如果你不想拥有全局变量，你总是可以在DOMContentLoaded function 中获取函数和计数器:=)

我已经对其进行了一些更改 bdw :)

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery .on（）函数无法按预期工作 jQuery delay（）无法按预期工作 jQuery手风琴无法正常工作 jQuery addEventListener无法正常工作 JavaScript表单验证无法正常工作 jQuery 淡入淡出效果未按预期工作 jQuery滚动效果未按预期工作 jQuery .live（&#39;click&#39;）没有按预期工作 jQuery / Js函数无法正常工作 jQuery的每个功能无法正常工作
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM