3

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

3 回答 3

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：​</p> 

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 框架，以使此代码更简单。

于 2012-05-05T05:33:07.133 回答
0

看看这个

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>

这应该工作:)

于 2012-05-05T06:05:36.907 回答
0

使用 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

于 2012-05-05T05:33:23.313 回答