Как отобразить элемент при выборе переключателя и скрыть его, если он не выбран с помощью javascript?

Я хочу сделать интерактивную онлайн-форму. Когда люди выбирают один вариант 1-го вопроса, соответствующий элемент будет отображаться, когда он будет выбран, и скрыть, когда выбран другой параметр. (Другой элемент должен отображаться при выборе другой кнопки)Как отобразить элемент при выборе переключателя и скрыть его, если он не выбран с помощью javascript?

Это код, который у меня есть до сих пор.

function showStuff(id, btn) { 
 
    if (document.getElementById(id).style.display == "none") { 
 
    document.getElementById(id).style.display = 'block'; 
 
    } else if (document.getElementById(id).style.display == 'block') { 
 
    document.getElementById(id).style.display = 'none'; 
 
    } 
 
}

<input name="q1" type="radio" value="A" onchange="showStuff('A', this); return false;" /> 
 
<input name="q1" type="radio" value="B" onchange="showStuff('B', this); return false;" /> 
 

 
<div id="A" style="display:none"> 
 
    This should display only when A button is clicked 
 
</div> 
 
<div id="B" style="display:none"> 
 
    This should display only when B button is clicked 
 
</div>

После того, как я показываю это, я не могу скрыть, когда я выбираю другой вариант. У вас есть хороший совет, пожалуйста? Огромное спасибо!

источник

2016-09-13 user3167515

вы хотите использовать JQuery ли? – Mohammad

Вы почти там .. просто добавьте одну строку кода, чтобы скрыть оба div на каждом клике.

Использование JQuery:

$("#A,#B").hide();

Без JQuery:

document.getElementById("A").style.display = 'none'; document.getElementById("B").style.display = 'none';

Посмотреть полный рабочий код ниже:

function showStuff(id, btn) { 
 
    $("#A,#B").hide(); // hide both each time 
 

 
    document.getElementById(id).style.display = 'block'; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input name="q1" type="radio" value="A" onchange="showStuff('A', this); return false;" /> 
 
<input name="q1" type="radio" value="B" onchange="showStuff('B', this); return false;" /> 
 

 
<div id="A" style="display:none"> 
 
    This should display only when A button is clicked 
 
</div> 
 

 
<div id="B" style="display:none"> 
 
    This should display only when B button is clicked 
 
</div>

источник

2016-09-13 09:18:51

Спасибо, что работает очень хорошо! – user3167515

Попробуйте это:

<script type="text/javascript"> 
function showStuff(id, btn) { 
    document.getElementById("A").style.display = 'none'; 
    document.getElementById("B").style.display = 'none'; 
    if (id == "A") { 
     document.getElementById("A").style.display = 'block'; 
    } else { 
     document.getElementById("B").style.display = 'block'; 
    } 

} 
</script>

источник

2016-09-13 09:21:43 piotrb

Я бы рекомендовал эту функцию

function showStuff(id, btn) { 
    document.getElementById('A').style.display = 'none'; 
    document.getElementById('B').style.display = 'none'; 

    document.getElementById(id).style.display = 'block'; 
}

Просто не забудьте скрыть все доступные варианты на самого начало функции, если вы когда-либо добавить еще один.

С jQuery все может быть намного проще - вы можете выбрать все входы с помощью селектора $ ('input [name = q1]') и скрыть все опции, используя только одну строку.

$('input[name=q1]').hide();

источник

2016-09-13 09:22:26

function showStuff(value,btn) { 
 
    if(value=='A'){ 
 
    document.getElementById("A").style.display = 'block'; 
 
    document.getElementById("B").style.display = 'none'; 
 
    } 
 
    else if(value=='B'){ 
 
    document.getElementById("B").style.display = 'block'; 
 
    document.getElementById("A").style.display = 'none'; 
 
    } 
 
     
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
<input name="q1" type="radio" value="A" onchange="showStuff('A', this); return false;" /> 
 
<input name="q1" type="radio" value="B" onchange="showStuff('B', this); return false;"/> 
 

 
<div id="A" style="display:none"> 
 
This should display only when A button is clicked 
 
</div> 
 

 
<div id="B" style="display:none"> 
 
This should display only when B button is clicked 
 
</div> </body> 
 

 
</html>

источник

2016-09-13 09:36:30 Gowtham

Как отобразить элемент при выборе переключателя и скрыть его, если он не выбран с помощью javascript?

ответ

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