Question

如何在javascript中应用带有函数的复选框？

如果取消选中复选框，如何使用特定标签隐藏帖子/对象？

我只需要知道如何设置复选框的功能，以便在打开页面时自动检查，并选中复选框以隐藏带有特定标记的帖子/对象。申请是否正确 -

display:none

或 -

 .structural {
 position:absolute;
 left:-9999px;
 }

- 我在研究期间发现了什么？

考虑到我缺乏技能，这是我可以做的事情：

<input 
  type="checkbox"
  name="mycheckbox"
  value="yes" 
  onclick="  CheckboxChecked(this.checked,'checkboxdiv')"  
</div>
</div>

<script type="text/javascript">
 CheckboxChecked(document.myform.mycheckbox.checked,'checkboxdiv');
</script>

Answer 1

如果我正确理解了您的问题，则在选中/取消选中复选框时，您将尝试隐藏/显示一组元素。这应该足以让你前进：

http://jsfiddle.net/HsCVq/

HTML：

<div class="hideWhenChecked">hide text</div>
<div>dont hide text</div>
<div class="hideWhenChecked">hide text</div>
<div>dont hide text</div>
<br />
<input type="checkbox" id="myCheckBox" />

JavaScript的：

document.getElementById('myCheckBox').addEventListener('click', function () {
    var checked = this.checked;
    var elementsToHide = document.getElementsByClassName('hideWhenChecked');

    if (checked) {
        // hide each element
    } else {
        // show each element
    }
});

我建议调查jQuery这样的javascript框架，以使这段代码更简单。

Answer 2

使用jQuery

使用jQuery这样的东西非常简单：

$("form").on("click", ":checkbox[name^='toggle_']", function(event){
  $( "#" + event.target.name.split('_')[1] )
    .toggle( event.target.checked );
});

但是你不应该仅仅为了这样的事情使用jQuery - 那就太过分了。

老式的JavaScript，就像你的祖父那样。

这是一个快速实现（在IE7 +中测试）。它的工作原理是从被点击的复选框的名称中提取相应的元素以隐藏它。

<form name="myform">
  <input name="toggle_checkBox" type="checkbox" checked /> 
  <div id="checkBox">
    If checked, you'll see me.
  </div>
</form>

点击此复选框会隐藏其下方的DIV。

var myform = document.forms.myform;
var inputs = myform.getElementsByTagName("input");

function toggleElement () {
 var e = event.target || window.event.srcElement;
 var display = e.checked ? "" : "none" ;
 document.getElementById( e.name.split('_')[1] ).style.display = display;
}

for ( var i = 0; i < inputs.length; i++ ) {
  var chk = inputs[i];
  if ( chk.type == "checkbox" && /^toggle_/.test( chk.name ) ) {
    if ( chk.addEventListener ) {
      chk.addEventListener("click", toggleElement, false); 
    } else if ( chk.attachEvent ) {
      chk.attachEvent("onclick", toggleElement);
    }
  }
}

演示：http://jsbin.com/ibicul/5

Answer 3

看看这个

HTML：

<form>
        <!-- for keeping checkbox checked when page loads use checked="checked" --->
        <input type="checkbox" name="check" onclick="toggle(this.form.check);" checked="checked">
        <input type="checkbox" name="check1"/><br>
        <br>
    </form>
    <!-- the id of this element is used in script to set visibility --->
    <div id="text" style="visibility:hidden"> 
        My visibility is based on checkbox selection 
    </div>

脚本

<script>
    function toggle(check)
    { if(!check.checked)
    {
    document.getElementById('text').style.visibility='visible';
    }
    else
    {
    document.getElementById('text').style.visibility='hidden';
    }
    }
</script>

这应该有效：）

如何在javascript中应用带有函数的复选框？

3 个答案:

使用jQuery

老式的JavaScript，就像你的祖父那样。