Флажки для включения и выключения текста

-1

Я хочу использовать флажок, чтобы изменить видимость абзаца в JavaScript. Я хотел бы сделать это в чистом JavaScript и не использовать какие-либо библиотеки, такие как jQuery. Кроме того, я хотел бы сделать это в JSFiddle.Флажки для включения и выключения текста

Я знаю, что один жизнеспособное решение заключается в использовании: document.formName.checkboxName.checked так:

function show { 
    document.getElementById("paragraphName").style.visibility=(document.formName.checkboxName.checked) ? "visible" : "hidden"; 
}

, но это решение не работает в JSFiddle.

Как мне это сделать?

источник

2014-10-26 ljnissen

где скрипка? –

Это сценарий, который у меня есть: http://jsfiddle.net/ljnissen/vcjpoooy/ – ljnissen

'paragraphName' должен быть' paragraphId', вам нужен идентификатор здесь, а не имя. –

HTML-

<label><input id="chk1" name="chk1" type="checkbox" onclick="nhamnham()"/>Hide p</label> 
<p id="par">Text in the paragraph...</p>

J S

function nhamnham() { 
    if(document.getElementById("chk1").checked) {  
     document.getElementById("par").style.visibility="hidden"; 
    } else { 
     document.getElementById("par").style.visibility="visible"; 
    } 
}

Проверить здесь JSFiddle

источник

2014-10-26 17:00:18

Хорошее опрятное решение. Спасибо! – ljnissen

Некоторые примечания: лучше избегайте встроенных обработчиков событий; флажки могут меняться другими способами, кроме кликов; Элементы 'input' не имеют содержимого и закрывающего тега; вы можете использовать трехмерный оператор для упрощения. – Oriol

Вы можете попробовать CSS только решение:

#toggler ~ #toggler-target { 
 
    display: none; 
 
} 
 
#toggler:checked ~ #toggler-target { 
 
    display: block; 
 
}

<input type="checkbox" id="toggler" /> 
 
<label for="toggler">Toggle</label> 
 
<p id="toggler-target">Foo bar baz</p>

источник

2014-10-26 16:48:50 Oriol

Это аккуратно, но я хотел бы сделать это в JavaScript. – ljnissen

попробовать это ..

window.onload = function init() { 
    checkbox = document.getElementById("checkbox1"); 
    checkbox.checked = true; 
    checkbox.onchange = function(){ 
    document.getElementById("first").style.display = checkbox.checked?'block':'none'; 
    } 
}

источник

2014-10-26 16:56:53

Ваше решение хорошее, но это немного подробный. Я предпочитаю тот, который был Henriquedsg89. – ljnissen

Да. Я также предпочитаю путь Henriquedsg89 .. :) –

Вам нужно вызвать функцию init() {согласно скрипке ссылки вы предоставили} на onclick в флажке:

<form name="formex"> 
<input id="checkbox1" type="checkbox" name="firstpara" onclick="init();" />First paragraph<br/> 
</form> 
<p id="first">This is a paragraph</p>

И JS быть как:

function init() { 

if(document.getElementById("checkbox1").checked === false) { 
    document.getElementById("first").style.display = 'none'; 
} 

else 
    document.getElementById("first").style.display = 'block'; 

}

FIDDLE

источник

2014-10-26 17:11:47 Jinandra

var par = document.getElementById('par'); 
 
document.getElementById('chk1').addEventListener('change', function() { 
 
    par.style.visibility = this.checked ? "hidden" : "visible"; 
 
});

<label><input id="chk1" name="chk1" type="checkbox">Toggle</label> 
 
<p id="par">Text in the paragraph...</p>

источник

2014-10-26 17:31:02 Oriol

Флажки для включения и выключения текста

ответ

Смежные вопросы