如何在javascript中应用带有功能的复选框？答案

【问题标题】：How to apply checkbox with functions in javascript?如何在javascript中应用带有功能的复选框？
【发布时间】：2012-05-05 14:05:36
【问题描述】：

如何在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>

【问题讨论】：

您是否要在页面加载时检查某些复选框并在选中复选框时隐藏页面上的某些元素

标签： javascript css function checkbox hide

【解决方案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 框架来简化此代码。

【讨论】：

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

【讨论】：

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

这应该工作:)

【讨论】：