隐藏按钮，除非选中复选框

Hide a button unless checkbox is selected

本文关键字：复选框 按钮 隐藏      更新时间：2023-09-26

我想在表单按钮中隐藏提交，除非至少有一个复选框被选中。这是我的视图的一个示例

$(document).ready(function() {
  $('input[type=checkbox]').click(function() {
    if ($("#radiobutton :checked") {
      $('#next-container').toggle();
    } else {
      $('#next-container').hide()
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked name="radio" id="radio">
<div id="nxtbutton">
  <div id="next-container">
    <button class="card__btn btn" id="nxtBtn" type="button">Next</button>
  </div>
</div>

检查change事件处理程序中复选框的长度，如果有复选框，则显示按钮

$(document).ready(function() {
   var boxes = $(' input[type=checkbox]').on('change', function() {
    var flag = boxes.filter(':checked').length > 0;
    $('#next-container').toggle(flag);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked name="radio" id="radio">
<input type="checkbox" checked name="radio" id="radio">
<input type="checkbox" checked name="radio" id="radio">
<input type="checkbox" checked name="radio" id="radio">
<br />
<div id="nxtbutton">
  <div id="next-container">
    <button class="card__btn btn" id="nxtBtn" type="button">Next</button>
  </div>
</div>

您需要在页面加载时隐藏按钮。

JS 

document.getElementById('nxtBtn').style.visibility = 'hidden';

visibility=hidden非常有用，但它仍然会占用页面空间。您也可以使用display=none

或者，试试CSS:

display:block或display:none

同样，将if($("#radiobutton :checked"){更改为if($("#radiobutton :checked")){。你少了一个括号。

使用.prop('checked') on复选框按钮检查是否被选中。当其中一个复选框有onchange事件时，循环遍历每个复选框，并维护一个计数器。

$(document).ready(function(){
  
 $('#nxtBtn').hide();
 $(' input[type="checkbox"]').on('change', function () {
   var count = 0;
               $(' input[type="checkbox"]').each(function(){
                 if($(this).prop('checked')) {
                   count++;
                   return;
                 }
                 
               })
               if(count > 0) {
                 $('#nxtBtn').show();
               }
   else {
      $('#nxtBtn').hide();
   }
         });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="checkbox"  name="radio" />
<input type="checkbox"  name="radio" />
<input type="checkbox"  name="radio" />
    <div id="nxtbutton">
             <div id="next-container">
             <button  class="card__btn btn" id="nxtBtn" type="button" >Next</button>
             </div>
             </div>

我在我的网站上经常使用这个。简短而甜蜜，但都是客户端。

$(document).ready(function(){
 $('#nxtBtn').hide(); 
 $('#radio').mouseup(function () {
    $('#nxtBtn').toggle();
 });
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<input type="checkbox" name="radio" id="radio">
<button class="card__btn btn" id="nxtBtn" type="button">Next</button>

相关文章：