1

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

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

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

编辑

如何将它与“全选”复选框结合使用？

4

7 回答 7

10 
$(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()方法接受一个布尔值来决定是否显示或隐藏。

于 2013-04-25T08:22:40.123 回答
6

我给你一个更好的！你可以只用 css 做到这一点。

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

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

这是一个演示：http: //jsfiddle.net/5wASK/

于 2013-04-25T08:21:45.827 回答
2

使用以下代码，当用户检查某些按钮时，按钮将出现，当取消选中所有按钮时，它将再次隐藏。

jQuery('[name="prog"]').click(function(){
    if (jQuery('[name="prog"]:checked').length > 0)    
        jQuery('#submit_prog').show();
    else jQuery('#submit_prog').hide();
});
于 2013-04-25T08:21:05.840 回答
0 
var $checkboxes = $('input[type=checkbox]');

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

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

于 2013-04-25T08:23:15.840 回答
0 
$('input[name="prog"]').change(function(){
    var submitBtn=$('#submit_prog');
    if ($('input[name="prog"]:checked').length > 0) {
        submitBtn.show();
    } else {
        submitBtn.hide();
    }
});
于 2013-04-25T08:23:35.997 回答
0

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

$("input[name='prog']").on("change",function(){
        $("#submit_prog").toggle();
});
于 2013-04-25T08:56:37.897 回答
0

你可以用这个

$(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' />

于 2020-08-12T15:48:41.120 回答