如果选中则显示提交按钮答案

【问题标题】：Show submit button if checked如果选中则显示提交按钮
【发布时间】：2013-04-25 08:16:50
【问题描述】：

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

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

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

编辑

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

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案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 接受一个布尔值来表示是显示还是隐藏。

【讨论】：

先生，我真的很喜欢你的方式！很好的思维方式！
你会在你的项目中这样做吗？
哇！这是简单而优雅的！你能再解释一下吗。谢谢。
@zerkms - 我会在我的项目中做 what 吗？答案可能是“是”，尽管当我想起 .toggle() 可以（可选地）接受布尔参数时，我简化了我的原始答案。
@nnnnnn：你原来的答案非常难以理解，你不这么认为吗？

【解决方案2】：

我会给你一个更好的！只需使用 css 即可。

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

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

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

【讨论】：

@Frederik：在你稍微改变布局后调试它祝你好运
@zerkms 考虑到选择器将与布局分离（即：此功能的类名），我认为它可以完美地工作
@antony 和 zerkms 我同意你们两个。 Fredrik 有最好的答案，他应该得到 +15，但这只是解决问题的不同方法
@StefanFrederiksen 是的，css-tricks puts it 这是“IE 8 及更高版本中的所有内容”

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案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' />

【讨论】：