0

我想在选中一个复选框时显示/隐藏一个 div。它目前适用于“全选”，但我无法让它与单个复选框一起使用。这是“全选”的代码：

JS：

<script language='JavaScript'> 
var checkboxcount = 1;

function doCheckOne() {
    if(checkboxcount == 0) {
        with (document.messageform) {
            for (var i=0; i < elements.length; i++) {
                if (elements[i].type == 'checkbox') {
                    elements[i].checked = false;
                document.getElementById('mail_delete_button').style.display = "none";
                }
            }
            checkboxcount = checkboxcount + 1;
        }
    } else
    with (document.messageform) {
        for (var i=0; i < elements.length; i++) {
            if (elements[i].type == 'checkbox') {
                elements[i].checked = true;
            document.getElementById('mail_delete_button').style.display = "block";
            }
        }
    checkboxcount = checkboxcount - 1;
    }
}
</script>

HTML：

<a href="javascript:void(0);" onclick="doCheckAll();this.blur();">Select all</a>
<div id="mail_delete_button" style="display: none;"></div>

我想在选中单个复选框时显示 div“mail_delete_button”，并在没有选中任何内容时隐藏它。注意：我的 html/input 字段采用“messageform”形式这是我的输入代码：

<input type='checkbox' name='delete_convos[]' value='{$pms[pm_loop].pmconvo_id}'>

任何帮助将不胜感激！谢谢！:)

4

2 回答 2

1

像这样的东西？给复选框一个id="chk"

<input type='checkbox' name='delete_convos[]' value='{$pms[pm_loop].pmconvo_id}' id="chk">

document.getElementById("chk").onclick = function() {
    document.getElementById('mail_delete_button').style.display = this.checked ? "block" : "none";
}​

演示

于 2012-07-04T21:36:16.820 回答
0

这可能对使用 jQuery 的人有所帮助。您可以使用 jQuery 的toggle()方法根据选中的复选框显示和隐藏 div 块。以下示例中的 div 块默认使用 CSSdisplay属性隐藏，该属性设置为none.

  $(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
      var val = $(this).attr("value");
      $("." + val).toggle();
    });
  });

你可以在这里看到一个例子：How to show/hide DIV if checkbox selected

于 2021-02-01T16:48:28.233 回答