Question

如果没有选中复选框，我需要隐藏提交按钮。如果选中至少一个，则应显示提交按钮。我使用JQuery。

<input type="checkbox" name="prog" value="1">
<input type="checkbox" name="prog" value="2">

<input type="submit" id="submit_prog" value='Submit' />

修改

如何将其与“全部选中”复选框结合使用？

Answer 1

$(document).ready(function() {

    var $submit = $("#submit_prog").hide(),
        $cbs = $('input[name="prog"]').click(function() {
            $submit.toggle( $cbs.is(":checked") );
        });

});

演示：http://jsfiddle.net/QMtey/1/

.toggle() method接受是否显示或隐藏的布尔值。

Answer 2

我会帮你做得更好！你可以用css做到这一点。

input[type=submit] {
  display:none;
}

input[type=checkbox]:checked ~ input[type=submit] {
  display:block;
}

下载演示：http://jsfiddle.net/5wASK/

Answer 3

当用户检查某些按钮时会显示以下代码，当取消选中时，它会再次隐藏。

jQuery('[name="prog"]').click(function(){
    if (jQuery('[name="prog"]:checked').length > 0)    
        jQuery('#submit_prog').show();
    else jQuery('#submit_prog').hide();
});

Answer 4

var $checkboxes = $('input[type=checkbox]');

$checkboxes.on('change', function() {
   $('#submit_prog').prop('disabled', !($checkboxes.length == $checkboxes.filter(':checked').length));
});

您的想法是使用JavaScript来检查复选框的数量是否与选中的复选框数量相匹配。的！翻转它并设置提交按钮的禁用属性。

Answer 5

$('input[name="prog"]').change(function(){
    var submitBtn=$('#submit_prog');
    if ($('input[name="prog"]:checked').length > 0) {
        submitBtn.show();
    } else {
        submitBtn.hide();
    }
});

Answer 6

使用切换隐藏和显示元素。

$("input[name='prog']").on("change",function(){
        $("#submit_prog").toggle();
});

Answer 7

您可以使用此

$(document).ready(function() {
  var countChecked = function() {
    var n = $("input:checked").length;
    if (n > 1) {
      $("#Should_Be_Same_ID").removeClass('hide');
    }
    else {
      $("#Should_Be_Same_ID").addClass('hide'); 
    }
  };
  countChecked();

  $("input[type=checkbox]").on("click", countChecked);
});

.hide {
  display : none
}

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

<br />
<br /><input type="checkbox" name="prog" value="1" id="checked">
<label for="checked"> Checked me
</label>
<br />
<br />
<br />
<input type="submit" class="hide" id="Should_Be_Same_ID" value='Submit' />

如果选中则显示提交按钮

7 个答案: