Geek asks and answers

How to apply checkbox with functions in javascript?

How to apply checkbox with functions in javascript?

How to hide a message / object with certain tags when unchecking?

I just need to know how to set the functions for the checkbox to automatically check the opening of the page and the checkbox to hide messages / objects with a specific tag on them. Is it right to apply -

display:none

or--

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

- What did I find during the study?

This was as far as I could think of 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>
+3
source share
3 answers

If I understand your question correctly, you are trying to hide / show a group of elements when the checkbox is checked / unchecked. That should be enough for you to go:

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

javascript, jQuery, .

+1

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

0

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>

That should work :)

0
source

More articles:


All Articles