如何檢查3個問題中的3個Radiobutton時顯示div？

我想顯示2個不同的div當用戶回答3個問題。所有問題都有單選按鈕顯示的答案。我想在用戶給出3個NO時顯示div2。如果只有一個答案爲是，則必須顯示div1。如何檢查3個問題中的3個Radiobutton時顯示div？

這是代碼：

<script type="text/javascript"> 
 
     function display(e){ 
 
      if(e.value == "yes"){ 
 
\t \t \t \t document.getElementById("hidediv1").style.display='block'; 
 
       document.getElementById("hidediv2").style.display='none'; 
 
\t \t \t } 
 
      else if(e.value =="no"){ 
 
       document.getElementById("hidediv2").style.display='block'; 
 
       document.getElementById("hidediv1").style.display='none'; 
 
      } 
 
     }   
 
</script>

<form id="stu01" action="#" method="post"> 
 
\t <p>1. Q1?<br> 
 
\t \t <input type="radio" name="sq01" value="yes" onclick="display(this)">Yes 
 
\t \t <input type="radio" name="sq01" value="no" onclick="display(this)">No 
 
\t </p> 
 
\t <p>2. Q2?<br> 
 
\t \t <input type="radio" name="sq02" value="yes" onclick="display(this)">Yes 
 
\t \t <input type="radio" name="sq02" value="no" onclick="display(this)">No 
 
\t </p> \t 
 
\t <p>3. Q3?<br> 
 
\t \t <input type="radio" name="sq03" value="yes" onclick="display(this)">Yes 
 
\t \t <input type="radio" name="sq03" value="no" onclick="display(this)">No 
 
\t </p> 
 
\t <div id="hidediv1" style="display:none"> 
 
\t \t \t \t 
 
\t </div> 
 
\t \t \t \t 
 
\t <div id="hidediv2" style="display:none"> 
 
\t 
 
\t </div> \t \t \t \t \t 
 
</form>

來源

2016-10-04 mazName

我希望我理解UR要求的權利..

JSFIDDLE DEMO

$('input[type="radio"]').click(function() { 
    var checkedNo = $('input[type="radio"]').filter(function() { 
     return $(this).is(":checked") && $(this).val() === "no"; 
    }); 
    if (checkedNo.length === 3) { 
     $('#hidediv1').show(); 
     $('#hidediv2').hide(); 
    } else { 
     $('#hidediv2').show(); 
     $('#hidediv1').hide(); 
    } 
});

完整版：

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>Form Radio Button</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <form id="stu01" action="#" method="post"> 
 
\t \t \t <p>1. Q1?<br> 
 
\t \t \t \t <input type="radio" name="sq01" value="yes">Yes 
 
\t \t \t \t <input type="radio" name="sq01" value="no">No 
 
\t \t \t </p> 
 
\t \t \t <p>2. Q2?<br> 
 
\t \t \t \t <input type="radio" name="sq02" value="yes">Yes 
 
\t \t \t \t <input type="radio" name="sq02" value="no">No 
 
\t \t \t </p> \t 
 
\t \t \t <p>3. Q3?<br> 
 
\t \t \t \t <input type="radio" name="sq03" value="yes">Yes 
 
\t \t \t \t <input type="radio" name="sq03" value="no">No 
 
\t \t \t </p> 
 
\t \t \t <div id="hidediv1" style="display:none"> 
 
\t \t \t \t \t \t No! 
 
\t \t \t </div> 
 
\t \t \t \t \t \t 
 
\t \t \t <div id="hidediv2" style="display:none"> 
 
\t \t \t  Yes! 
 
\t \t \t </div> \t \t \t \t \t 
 
\t \t </form> 
 
\t \t <script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b‌8=" crossorigin="anonymous"></script> 
 
\t \t <script type="text/javascript"> 
 
\t \t \t $('input[type="radio"]').click(function() { 
 
\t \t \t  var checkedNo = $('input[type="radio"]').filter(function() { 
 
\t \t \t   return $(this).is(":checked") && $(this).val() === "no"; 
 
\t \t \t  }); 
 
\t \t \t  if (checkedNo.length === 3) { 
 
\t \t \t   $('#hidediv1').show(); 
 
\t \t \t   $('#hidediv2').hide(); 
 
\t \t \t  } else { 
 
\t \t \t   $('#hidediv2').show(); 
 
\t \t \t   $('#hidediv1').hide(); 
 
\t \t \t  } 
 
\t \t \t }); 
 
\t \t </script> 
 
\t </body> 
 
</html>

來源

2016-10-04 15:11:46 liborza

謝謝！它在演示面板中正常工作，但它不在我的文件中工作！它有沒有嵌入代碼？ – mazName

是的，它需要'jQuery' – liborza

我可以知道你使用了哪個jQuery文件嗎？ – mazName

-1

使用onChange事件監聽器，更新變量狀態，檢查的時候是3，附加你的DIV

來源

2016-10-04 14:35:04

如何檢查3個問題中的3個Radiobutton時顯示div？

回答

相關問題