Question

我正在进行客户调查，询问客户是否希望与他们联系，了解他们的体验。如果他们选择是，则在询问他们的首选联系方式之后会有其他问题。所选方法的信息。

HTML

<b>May we contact you about your experience?</b>
<br/>
<input type="radio" name="Contact" id="ContactYes" value="Yes" required />
<label for="ContactYes">Yes</label>
<input type="radio" name="Contact" id="ContactNo" value="No" />
<label for="ContactNo">No</label>

<br />
<br />

<b>Select your preferred method of contact:</b>
<br/>
<input type="radio" name="FormOfContact" id="Phone" value="Phone" />
<label for="Phone">Phone</label>
<input type="radio" name="FormOfContact" id="Email" value="Email" />
<label for="Email">Email</label>

基本上，我想知道的是我如何制作FormOfContact＆＃39;仅当用户选择＆＃34;是＆＃34;被联系？

Answer 1

如果为单选按钮创建onchange事件，则可以检查是否＆＃34;是＆＃34;或＆＃34;不＆＃34;被选中。如果＆＃34;是＆＃34;选中，添加属性＆＃34; required = true＆＃34;到第二个领域。

ELEMENT.setAttribute("required",true)

Answer 2

一些javascript可以提供帮助。请参阅此处的plunker：http://embed.plnkr.co/k3yIf0gh03JBACSeV6yA/

<!DOCTYPE html>
<html>

<script>
function onChange(required) {
  document.getElementById('Phone').required = required;
  document.getElementById('div1').style.display = required ? 'block' : 'none';
}  
</script>

<body>
    <b>May we contact you about your experience?</b>
    <br/>
        <input type="radio" name="Contact" id="ContactYes" value="Yes" required onChange='onChange(true)'/><label for="ContactYes">Yes</label>
        <input type="radio" name="Contact" id="ContactNo" value="No" onChange='onChange(false)' /><label for="ContactNo">No</label>

    <br />
    <br />
    <div id='div1' style='display:none'>
        <b>Select your preferred method of contact:</b><br/>
        <input type="radio" name="FormOfContact" id="Phone" value="Phone" /><label for="Phone">Phone</label>
        <input type="radio" name="FormOfContact" id="Email" value="Email" /><label for="Email">Email</label>
    </div>
</body>
</html>

Javascript如果选中单选按钮，则需要额外输入

2 个答案: