How to apply checkbox with functions in javascript?

Question

How to apply checkbox with functions in javascript?

How to hide post/object with specific tags when checkbox is unchecked?

I just need to know how to put functions for the checkbox to be automatically check upon opening the page and the checkbox to hide posts/objects with a specific tag on them. Is it correct to apply--

display:none

or--

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

--that I've found during research?

This was as far as I could go considering my lack of skills:

<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

If I understood your question correctly, you are attempting to hide/show a group of elements when a checkbox is checked/unchecked. This should be enough to get you going:

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
    }
});​

I'd suggest looking into a javascript framework such as jQuery to make this code a lot simpler.

Answer 2

With jQuery

Something like this is pretty trivial with jQuery:

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

But you shouldn't use jQuery just for something like this - that would be overkill.

Old-fashioned JavaScript, the way your Grandfather did it.

Here's a quick implementation (tested in IE7+). It works by extracting the corresponding element to hide from the name of the checkbox being clicked.

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

This checkbox, when clicked will hide the DIV below it.

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);
    }
  }
}

Demo: http://jsbin.com/ibicul/5

Answer 3

Have a look at this

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

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

This should work :)