Ich möchte, dass Kontrollkästchen eine div-Klasse ausblenden und anzeigen.

Bisher habe ich den Code, der das Div versteckt, aber nicht anzeigt. Was ich weiß, dass ich irgendwie falsch gemacht habe! Ich habe mehrere Kontrollkästchen

Hier ist mein Code

    <script type="text/javascript">
    function show(target) {
  document.getElementById(target).style.display = 'block';
}

function hide(target) {
  document.getElementById(target).style.display = 'none';
}
    </script>
    <tr>
    <th><input onclick="hide('tester')" type="checkbox" checked>

Ich weiß, dass es etwas mit dem Onclick-Fell zu tun hat. Wäre es besser, es als Umschalter zu haben?

Sam

1
ddsbro 12 Aug. 2015 im 12:51

3 Antworten

Beste Antwort

Sie müssen einen einzelnen Handler verwenden, in dem Sie basierend auf dem aktivierten Status den Anzeigewert wie einstellen können

function showhide(el, target) {
    document.getElementById(target).style.display = el.checked ? 'block' : 'none';
}
<input onclick="showhide(this, 'tester')" type="checkbox" checked />
<div id="tester">tester</div>

JQuery verwenden

$('#mycheckbox').change(function() {
  $('#tester').toggle(this.checked)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="mycheckbox" type="checkbox" checked />
<div id="tester">tester</div>
4
Arun P Johny 12 Aug. 2015 im 09:53

Probier diese:

var thumbsUp = element(by.css('span.glyphicon-thumbs-up'));
var thumbsDown = element(by.css('span.glyphicon-thumbs-down'));

it('should check ng-show / ng-hide', function() {
  expect(thumbsUp.isDisplayed()).toBeFalsy();
  expect(thumbsDown.isDisplayed()).toBeTruthy();

  element(by.model('checked')).click();

  expect(thumbsUp.isDisplayed()).toBeTruthy();
  expect(thumbsDown.isDisplayed()).toBeFalsy();
});

Demo

1
Ivin Raj 12 Aug. 2015 im 10:07

Versuche dies

    function toggle(target) {
    
      if(document.getElementById(target).style.display=="block")
      document.getElementById(target).style.display = 'none';        
      else
         document.getElementById(target).style.display = 'block';
}
<input onclick="toggle('toggle')" type="checkbox" checked>
<div id="toggle">Show and hide</div>
1
Kishan 12 Aug. 2015 im 10:01