在if语句中从单选按钮的“ id”中选择一个值

时间:2018-08-09 14:18:03

标签: javascript jquery html if-statement

我在题为"operatingCompany"的第一个表格中为单选按钮值苦苦挣扎。在函数get_recommendation()中,我处理前两个单选按钮的值(逻辑不是最有效的)。

但是,我不知道如何通过id写入逻辑/拉单选按钮值。我试图在我的get_lastOpco()函数中执行此操作,但是我不希望使用.change函数。

如何如何获取并处理其余三个单选按钮值?

var ESS = "Everyday Solutions";
var ILL = "ILab";
var SPP = "Spark";
var ITT = "IT Innovation";
var ES = ESS.fontcolor("red");
var IL = ILL.fontcolor("red");
var SP = SPP.fontcolor("red");
var IT = ITT.fontcolor("red");

function get_recommendation() {
    $(document).ready(function() {	
	
	//Refer back to OPerating Company selection to choose between ILAB(GPC) and SPARK(APC)
	var opco_selection;
	var opco_selection2;
	if (document.operatingCompany.opco[0].checked) {
		opco_selection = document.operatingCompany.opco[0].value;
		opco_selection = "ILab";
		opco_selection2 = "Spark";
	} else if (document.operatingCompany.opco[1].checked) {
		opco_selection = document.operatingCompany.opco[1].value;
		opco_selection = "Spark";
		opco_selection2 = "ILab";
	}
	var OS = opco_selection.fontcolor("red");
	var OS2 = opco_selection2.fontcolor("red");
	
    //If Opco is checked, Both ES are not checked, ILAB/SPARK is not checked, and IT is not checked
    if (($('input[name="opco"]:checked').length > 0) && ($('#No1').is(':checked')) && ($('#No2').is(':checked')) && ($('#No3').is(':checked')) && ($('#No4').is(':checked'))) {
        var primary = ("Not Enough Information Given");
		var secondary = ("Not Enough Information Given");
    }
	//If Opco is checked, Both ES are not checked, ILAB/SPARK is not checked, and IT is checked
    if (($('input[name="opco"]:checked').length > 0) && ($('#No1').is(':checked')) && ($('#No2').is(':checked')) && ($('#No3').is(':checked')) && ($('#Yes4').is(':checked'))) {
        var primary = ("Primary Recommendation: " + IT);
        var secondary = ("Secondary Recommendation: " + OS);
    }
	//If Opco is checked, Both ES are not checked, ILAB/SPARK is checked, and IT is not checked
    if (($('input[name="opco"]:checked').length > 0) && ($('#No1').is(':checked')) && ($('#No2').is(':checked')) && ($('#Yes3').is(':checked')) && ($('#No4').is(':checked'))) {
        var primary = ("Primary Recommendation: " + OS);
        var secondary = ("Secondary Recommendation: " + OS2);
    }
	//If Opco is checked, Both ES are not checked, ILAB/SPARK is checked, and IT is checked
    if (($('input[name="opco"]:checked').length > 0) && ($('#No1').is(':checked')) && ($('#No2').is(':checked')) && ($('#Yes3').is(':checked')) && ($('#Yes4').is(':checked'))) {
        var primary = ("Primary Recommendation: " + OS);
        var secondary = ("Secondary Recommendation: " + IT);
    }
	//If Opco is checked, Both ES are not checked, ILAB/SPARK is checked, and IT is checked
    if (($('input[name="opco"]:checked').length > 0) && ($('#No1').is(':checked')) && ($('#No2').is(':checked')) && ($('#Yes3').is(':checked')) && ($('#Yes4').is(':checked'))) {
        var primary = ("Primary Recommendation: " + OS);
        var secondary = ("Secondary Recommendation: " + IT);
    }
	//If Opco is checked, 2nd ES is checked, ILAB/SPARK is not checked, and IT is not checked
    if (($('input[name="opco"]:checked').length > 0) && ($('#No1').is(':checked')) && ($('#Yes2').is(':checked')) && ($('#No3').is(':checked')) && ($('#No4').is(':checked'))) {
        var primary = ("Primary Recommendation: " + ES);
        var secondary = ("Secondary Recommendation: " + OS);
    }
	//If Opco is checked, 2nd ES is checked, ILAB/SPARK is not checked, and IT is checked
    if (($('input[name="opco"]:checked').length > 0) && ($('#No1').is(':checked')) && ($('#Yes2').is(':checked')) && ($('#No3').is(':checked')) && ($('#Yes4').is(':checked'))) {
        var primary = ("Primary Recommendation: " + ES);
        var secondary = ("Secondary Recommendation: " + IT);
    }
	//If Opco is checked, 2nd ES is checked, ILAB/SPARK is checked, and IT is not checked
    if (($('input[name="opco"]:checked').length > 0) && ($('#No1').is(':checked')) && ($('#Yes2').is(':checked')) && ($('#Yes3').is(':checked')) && ($('#No4').is(':checked'))) {
        var primary = ("Primary Recommendation: " + OS);
        var secondary = ("Secondary Recommendation: " + ES);
    }
	//If Opco is checked, 2nd ES is checked, ILAB/SPARK is checked, and IT is checked
    if (($('input[name="opco"]:checked').length > 0) && ($('#No1').is(':checked')) && ($('#Yes2').is(':checked')) && ($('#Yes3').is(':checked')) && ($('#Yes4').is(':checked'))) {
        var primary = ("Primary Recommendation: " + OS);
        var secondary = ("Secondary Recommendation: " + ES);
    }
	//If Opco is checked, 1st ES is checked, ILAB/SPARK is not checked, and IT is not checked
    if (($('input[name="opco"]:checked').length > 0) && ($('#Yes1').is(':checked')) && ($('#No2').is(':checked')) && ($('#No3').is(':checked')) && ($('#No4').is(':checked'))) {
        var primary = ("Primary Recommendation: " + ES);
        var secondary = ("Secondary Recommendation: " + OS);
    }
	//If Opco is checked, 1st ES is checked, ILAB/SPARK is not checked, and IT is checked
    if (($('input[name="opco"]:checked').length > 0) && ($('#Yes1').is(':checked')) && ($('#No2').is(':checked')) && ($('#No3').is(':checked')) && ($('#Yes4').is(':checked'))) {
        var primary = ("Primary Recommendation: " + ES);
        var secondary = ("Secondary Recommendation: " + IT);
    }
	//If Opco is checked, 1st ES is checked, ILAB/SPARK is checked, and IT is not checked
    if (($('input[name="opco"]:checked').length > 0) && ($('#Yes1').is(':checked')) && ($('#No2').is(':checked')) && ($('#Yes3').is(':checked')) && ($('#No4').is(':checked'))) {
        var primary = ("Primary Recommendation: " + OS);
        var secondary = ("Secondary Recommendation: " + ES);
    }
	//If Opco is checked, 1st ES is checked, ILAB/SPARK is checked, and IT is checked
    if (($('input[name="opco"]:checked').length > 0) && ($('#Yes1').is(':checked')) && ($('#No2').is(':checked')) && ($('#Yes3').is(':checked')) && ($('#Yes4').is(':checked'))) {
        var primary = ("Primary Recommendation: " + OS);
        var secondary = ("Secondary Recommendation: " + ES);
    }
	//If Opco is checked, Both ES are checked, ILAB/SPARK is not checked, and IT is not checked
    if (($('input[name="opco"]:checked').length > 0) && ($('#Yes1').is(':checked')) && ($('#Yes2').is(':checked')) && ($('#No3').is(':checked')) && ($('#No4').is(':checked'))) {
        var primary = ("Primary Recommendation: " + ES);
        var secondary = ("Secondary Recommendation: " + OS);
    }
	//If Opco is checked, Both ES are checked, ILAB/SPARK is not checked, and IT is checked
    if (($('input[name="opco"]:checked').length > 0) && ($('#Yes1').is(':checked')) && ($('#Yes2').is(':checked')) && ($('#No3').is(':checked')) && ($('#Yes4').is(':checked'))) {
        var primary = ("Primary Recommendation: " + ES);
        var secondary = ("Secondary Recommendation: " + IT);
    }
	//If Opco is checked, Both ES are checked, ILAB/SPARK is checked, and IT is not checked
    if (($('input[name="opco"]:checked').length > 0) && ($('#Yes1').is(':checked')) && ($('#Yes2').is(':checked')) && ($('#Yes3').is(':checked')) && ($('#No4').is(':checked'))) {
        var primary = ("Primary Recommendation: " + OS);
        var secondary = ("Secondary Recommendation: " + ES);
    }
	//If Opco is checked, Both ES are checked, ILAB/SPARK is checked, and IT is checked
    if (($('input[name="opco"]:checked').length > 0) && ($('#Yes1').is(':checked')) && ($('#Yes2').is(':checked')) && ($('#Yes3').is(':checked')) && ($('#Yes4').is(':checked'))) {
        var primary = ("Primary Recommendation: " + OS);
        var secondary = ("Secondary Recommendation: " + ES);
    }
    document.getElementById("primary").innerHTML = primary;
    document.getElementById("secondary").innerHTML = secondary;		
});
}

function get_lastOpco(){
		
		$('input[type="radio"][name="opco"]').change(function(){
		switch(this.id){
			case 'MPC':
				var primary = ("Primary Recommendation: " + IL);
				var secondary = ("Secondary Recommendation: " + ES);
				document.getElementById("primary").innerHTML = primary;
				document.getElementById("secondary").innerHTML = secondary;
				break;

		}
	});	
}
    <!doctype html>
    <html lang="en">
       <head>
          <meta charset="utf-8">
          <title>Spigit Input Form</title>
          <meta name="description" content="Spigit Input Form">
          <meta name="author" content="SitePoint">
          <link rel="stylesheet" href="css/styles.css?v=1.0">
          <link rel="stylesheet" href="Project_File_CSS.css">
          <link rel="stylesheet" href="Recommendation_Form_CSS.css">
          <!--[if lt IE 9]>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
          <![endif]-->
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <script src="jquery_spigit.js"></script>
       </head>
       <body>

   
      <script type="text/javascript" src="selection_storage_2.js"></script>
      <script type="text/javascript" src="recommendation_logic_2.js"></script>
      <script type="text/javascript" src="Side_Menu_Popup.js"></script>
	  <script type="text/javascript" src="get_recommendation_test.js"></script>
	  
      <!---------------------------------------------------------Operating Company Question----------------------------------->
      <section id="first" class="section">
         <div class="container">
            <form name="operatingCompany">
               <h3>1.What OPERATING COMPANY Are You Employeed With?</h3>
               <input type="radio" name="opco" id="GPC" value="GPC" >GPC</br>
               <input type="radio" name="opco" id="APC" value="APC" >APC</br>
               <input type="radio" name="opco" id="MPC" value="MPC" >MPC</br>
               <input type="radio" name="opco" id="Gulf"value="Gulf">Gulf</br>
               <input type="radio" name="opco" id="SCS" value="SCS" >SCS</br></br>
               <!-- <input type="button" value="Display User Selection" onclick=get_opco() /> -->
            </form>
            <p id="opco_result"> </p>
            </br>
         </div>
         <!---------------------------------------------------------Prototyped Question----------------------------------->
         <div class="container">
            <form name="prototyped">
               <h3>2.Has the innovation been PROTOTYPED?</h3>
               <input type="radio" name="prototyped" id="Yes1" value="Yes" >Yes</br>
               <input type="radio" name="prototyped" id="No1"  value="No" >No</br></br>
               <!-- <input type="button" value="Display User Selection" onclick=get_prototype() /> -->
            </form>
            <p id="prototyped_result"> </p>
            </br>
         </div>
         <!--------------------------------------------------------Adopted or Tested Question---------------------------->
         <div class="container">
            <form name="adopted_tested">
               <h3>3.Has the innovation been ADOPTED OR TESTED?</h3>
               <input type="radio" name="adopt" id="Yes2" value="Yes" >Yes</br>
               <input type="radio" name="adopt" id="No2"  value="No" >No</br></br>
               <!-- <input type="button" value="Display User Selection" onclick=get_adopt_test() /> -->
            </form>
            <p id="adopted_tested_result"> </p>
            </br>
         </div>
         <!------------------------------------------------------Can it make money Question------------------------------->
         <div class="container">
            <form name="makeMoney">
               <h3>4.Is this a PRODUCT OR SERVICE that can make MONEY?</h3>
               <input type="radio" name="money" id="Yes3" value="Yes" >Yes</br>
               <input type="radio" name="money" id="No3"  value="No" >No</br></br>
               <!-- <input type="button" value="Display User Selection" onclick=get_money() /> -->
            </form>
            <p id="makeMoney_result"> </p>
            </br>
         </div>
         <!------------------------------------------------IT Specific Question------------------------------------------->
         <div class="container">
            <form name="innovativeTechnology">
               <h3>5.Is your innovation an INNOVATIVE TECHNOLOGY or process that boosts the company's PRODUCTIVITY or brings additional value from a VENDOR RELATIONSHIP?</h3>
               <input type="radio" name="innovative" id="Yes4" value="Yes" >Yes</br>
               <input type="radio" name="innovative" id="No4"  value="No" >No</br></br>
               <!-- <input type="button" value="Display User Selection" onclick=get_innovative() /> -->
            </form>
            <p id="innovativeTechnology_result"> </p>
            </br>
            <input type="button" class="button" value="Submit Form" onclick="get_lastOpco(); get_recommendation(); openNav()">
         </div>
         <!--------------------------------------------Side Menu PopUp--------------------------------------------------------->
         <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <br></br>
            <h1> Based on your selections, we recommend the following: </h1>
            <div id="myPrimarydiv" class="primarydiv">
               <a h2><span id="primary"></span></h2>
            </div>
            <br></br>
            <div id="mySecondarydiv" class="secondarydiv">
               <a h2><span id="secondary"></span></h2>
            </div>
         </div>
      </section>
   </body>
</html>

谢谢。

0 个答案:

没有答案