Question

我想在选中一个复选框时显示/隐藏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}'>

任何帮助将不胜感激！谢谢！：）

Answer 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";
}

DEMO

Answer 2

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

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

您可以在此处查看示例：How to show/hide DIV if checkbox selected

选中复选框时显示/隐藏div

2 个答案: