基於HTML/JavaScript中的單選按鈕選擇更改圖像

我有一個項目，我將爲三個不同的單選按鈕組顯示圖像。如果選擇了單選按鈕，則圖像需要更改爲不同的圖片。除了這部分，我還有其他代碼正在做我所需要的。我在技術上也設想改變單選按鈕的字體顏色，並在選擇它時加粗。我甚至沒有嘗試過，因爲我無法讓圖像切換工作。這是我的代碼。任何輸入都會有幫助。該代碼以函數開始，根據單選按鈕選擇進行一些計算。然後進入一些驗證部分，提交和清除。我做的圖片材料更接近HTML的正文之前的底部。就像我說的，任何輸入都將不勝感激。基於HTML/JavaScript中的單選按鈕選擇更改圖像

<html> 
<head> 
    <title> Final Project Order Form </title> 

    <script type="text/javascript"> 
     var prices = new Object(); 
     function updateTotal() { 
      var total = 0.00; 
      for (var price in prices) { 
       total += parseInt(prices[price]); 
      } 
      document.getElementById("total").value = total; // Add the id "total" to the input field 
     } 
     function doClear() 
      { 
       document.AddressForm.customer.value = ""; 
       document.AddressForm.address.value = ""; 
       document.AddressForm.city.value= ""; 
       document.AddressForm.state.options[0].selected = "true"; 
       document.AddressForm.zip.value = ""; 
       document.AddressForm.phone.value= ""; 
       document.AddressForm.email.value= ""; 
      document.AddressForm.total.value= ""; 

       document.OrderForm.cases[0].checked = false; 
       document.OrderForm.cases[1].checked = false; 
       document.OrderForm.cases[2].checked = false; 

       document.OrderForm.monitors[0].checked = false; 
       document.OrderForm.monitors[1].checked = false; 
       document.OrderForm.monitors[2].checked = false; 

       document.OrderForm.printers[0].checked = false; 
       document.OrderForm.printers[1].checked = false; 
       document.OrderForm.printers[2].checked = false; 

       return; 
      } 

      function validateText() 
      { 
       var transcribed = true; 

       var notification = ""; 

       var customer = document.AddressForm.customer.value; 
       var address = document.AddressForm.address.value; 
       var city = document.AddressForm.city.value; 
       var state = document.AddressForm.state.value; 
       var zip = document.AddressForm.zip.value; 
       var phone = document.AddressForm.phone.value; 
       var email = document.AddressForm.email.value; 

       if (customer.length == 0) 
       { 
        transcribed = false; 
        alert("Please enter your name."); 
        return; 
       } 

       if (address.length == 0) 
       { 
        transcribed = false; 
        alert("Please enter your address."); 
        return; 
       } 

       if (city.length == 0) 
       { 
        transcribed = false; 
        alert("Please enter your city."); 
        return; 
       } 

       if (zip.length == 0) 
       { 
        transcribed = false; 
        alert("Please enter your five digit zip."); 
        return; 
       } 

       if (phone.length == 0) 
       { 
        transcribed = false; 
        alert("Please enter your phone."); 
        return; 
       } 

       if (email.length == 0) 
       { 
        transcribed = false; 
        alert("Please enter your email."); 
        return; 
       } 

       if (!transcribed) 
       { 
        alert(notification); 
       } 

       return transcribed; 
      } 

      function validateEmail() 
       { 
        var email = document.AddressForm.email.value; 

        var pass = true; 

        if (email.indexOf('@') == -1) 
        { 
         pass = false; 
        } 

        else if (email.indexOf('@') == 0) 
        { 
         pass = false; 
        } 

        else if (email.indexOf('@') == email.length - 1) 
        { 
         pass = false; 
        } 

        return pass; 
       } 

       /* 
        Checking all the format functions 
       */    
       function validatePhone() 
       { 

        var phone = document.AddressForm.phone.value; 

        if(isTenDigits(phone) || isTwelveAndBrackets(phone) || isTwelveAndDashes(phone) || isBracketsAndDash(phone)) 
         return true; 

        return false; 

       } 

       /* 
        Checking all the Zip is correct 
       */ 
       function validateZip() 
       { 

        var zip = document.AddressForm.zip.value; 

        if(isfiveDigits(zip)) 
         return true; 

        return false; 

       } 

       /* 
        Checking the 10-digit format 
       */ 
       function isTenDigits(phone) 
       { 

        if(phone.length != 10) 
         return false; 

        var pass = true; 

        for (var i = 0;i < phone.length; i++) 
        { 
         var c = phone.charAt(i); 
         if (!isDigit(c)) 
         { 
          pass = false; 
         } 
        } 

        return pass; 
       } 

       /* 
       Checking the (xxx)xxxxxxx format 
       */ 
       function isTwelveAndBrackets(phone) 
       { 

        if(phone.length != 12) 
         return false; 

        var pass = true; 

        for (var i = 0;i < phone.length; i++) 
        { 
         var c = phone.charAt(i); 
         var pos = i + 1; 
         if(i == 0) 
         { 
          if(c != '(') 
          { 
           pass = false; 
          } 
         } 
         else if(i == 4) 
         { 
          if(c != ')') 
          { 
           pass = false; 
          } 
         } 
         else 
         { 
          if (!isDigit(c)) 
          { 
           pass = false; 
          } 
         } 
        } 

        return pass; 
       } 

       /* 
       Checking the xxx-xxx-xxxx format 
       */ 
       function isTwelveAndDashes(phone) 
       { 

        if(phone.length != 12) 
         return false; 
        var pass = true; 

        for (var i = 0;i < phone.length; i++) 
        { 
         var c = phone.charAt(i); 
         var pos = i + 1; 
         if(i == 3) 
         { 
          if(c != '-') 
          { 
           pass = false; 
          } 
         } 
         else if(i == 7) 
          { 
           if(c != '-') 
           { 
            pass = false; 
           } 
          } 
          else 
          { 
           if (!isDigit(c)) 
           { 
            pass = false; 
           } 
          } 
        } 

        return pass; 
       } 

       /* 
       Checking the (xxx)-xxx-xxxx format 
       */ 
       function isBracketsAndDash(phone) 
       { 
        if (phone.length != 13) 
         return false; 

        var pass = true; 

        for (var i = 0;i < phone.length; i++) 
        { 
         var c = phone.charAt(i); 
         var pos = i + 1; 
         if(i == 0) 
         { 
          if(c != '(') 
          { 
           pass = false; 
          } 
         } 
         else if(i == 4) 
         { 
          if(c != ')') 
          { 
           pass = false; 
          } 
         }  
         else if(i == 8) 
          { 
           if(c != '-') 
           { 
            pass = false; 
           } 
          } 
          else 
          { 
           if (!isDigit(c)) 
           { 
            pass = false; 
           } 
          } 
        } 

        return pass; 
       } 

       /* 
       Validate Zip is 5 digits and numerical 
       */ 
       function isfiveDigits(zip) 
       { 

        if(zip.length != 5) 
         return false; 

        var pass = true; 

        for (var i = 0;i < zip.length; i++) 
        { 
         var c = zip.charAt(i); 
         if (!isDigit(c)) 
         { 
          pass = false; 
         } 
        } 

        return pass; 
       } 

       function isDigit(num) 
       { 
        if (num.length>1) 
        { 
         return false; 
        } 

        var string="1234567890"; 

        if (string.indexOf(num)!=-1) 
        { 
         return true; 
        } 
        return false; 
       }    

      function printCaseRadio() 
       { 
        var tower; 

        if (document.OrderForm.cases[0].checked) 
        { 
         tower = "Desktop Case ($500) <br />"; 
        } 
        else if (document.OrderForm.cases[1].checked) 
         { 
          tower = "Mini-Tower Case ($600) <br />"; 
         } 
         else if (document.OrderForm.cases[2].checked) 
          { 
           tower = "Full Tower Case ($700) <br />"; 
          } 
          else 
          { 
           tower = "No Case Selected <br/>" 
          } 
        return tower; 
       } 

      function printMonitorRadio() 
       { 
        var monitors; 

        if (document.OrderForm.monitors[0].checked) 
        { 
         monitors = "17inch LCD Flat Screen (250.00) <br />"; 
        } 
        else if (document.OrderForm.monitors[1].checked) 
         { 
          monitors = "19inch LCD Flat Screen (300.00) <br />"; 
         } 
         else if (document.OrderForm.monitors[2].checked) 
          { 
           monitors = "21inch LCD Flat Screen (350.00) <br />"; 
          } 
          else 
          { 
           monitors = "No Monitor Selected <br/>" 
          } 
        return monitors; 
       } 

     function printPrinterRadio() 
      { 
       var printers; 

       if (document.OrderForm.printers[0].checked) 
       { 
        printers = "Inkjet Printer (100.00) <br />"; 
       } 
       else if (document.OrderForm.printers[1].checked) 
        { 
         printers = "Laser Printer (250.00) <br />"; 
        } 
        else if (document.OrderForm.printers[2].checked) 
         { 
          printers = "Laser Printer (250.00) <br />"; 
         } 
         else 
         { 
          printers = "No Printer Selected <br/>" 
         } 

       return printers; 
      } 

     function doSubmit() 
      { 

       /* 
       Submitting Dropdown selection 
       */ 
       var ind = document.AddressForm.state.options.selectedIndex; 
       var value = document.AddressForm.state.options[ind].value; 


       /* 
       Checking the phone number is correct 
       */    
       if(validatePhone() == false) 
       { 
        var message = "Phone number must be in one of the following formats:\n"; 
        message += "ddd-ddd-dddd\n"; 
        message += "dddddddddd\n"; 
        message += "(ddd)ddddddd\n"; 
        message += "(ddd)ddd-dddd"; 

        alert(message); 
       } 

       /* 
       Checking the zip is correct 
       */ 
       if(validateZip() == false) 
       { 
        var message = "Zip must be five digits and can only contain numbers"; 

        alert(message); 
       } 

       /* 
       Checking the email is correct 
       */ 

       if(validateEmail() == false) 
       { 
        var message = "Email must contain @ except in the first and last position."; 
        alert(message); 
       } 





       /* 
       Checking that all validation steps work, prior to printing out detail 
       */     

       if (validateText() && validateEmail()&&validatePhone()&& validateZip()) 
       { 

        var confirmation = ""; 
        var Namestring = document.AddressForm.customer.value.charAt(0).toUpperCase()+document.AddressForm.customer.value.substring(1).toLowerCase(); 
        var Citystring = document.AddressForm.city.value.charAt(0).toUpperCase()+document.AddressForm.city.value.substring(1).toLowerCase(); 

        confirmation += "Your order has been submitted.<br /><br />"; 
        confirmation += "Name: " + Namestring + "<br />"; 
        confirmation += "Address: " + document.AddressForm.address.value + "<br />"; 
        confirmation += "City: " + Citystring + "<br />"; 
        confirmation += "State: " + value + "<br />"; 
        confirmation += "Zip: " + document.AddressForm.zip.value + "<br />"; 
        confirmation += "Phone: " + document.AddressForm.phone.value + "<br />"; 
        confirmation += "Email: " + document.AddressForm.email.value + "<br />"; 


        var casepick = printCaseRadio(); 

        confirmation += casepick; 

        var monitorpick = printMonitorRadio(); 

        confirmation += monitorpick; 

        var printerpick = printPrinterRadio(); 

        confirmation += printerpick; 

        confirmation += "Total: " + document.AddressForm.total.value + "<br />"; 

        document.write(confirmation); 


       } 
       return; 
      } 
     function getRadioValue(radioName) 
     { 
      for (var i = 0; i < radioName.length; i++) 
      { 
       if (radioName[i].checked == true) 
       { 
        return radioName[i].value; 
       } 
      } 
     } 

     var caseIndex=0; 
     function displayCase() 
     { 
      if (document.OrderForm.cases[0].checked = true) 
      { 
       caseIndex=0; 
      } 
      else if (document.OrderForm.cases[0].checked = true) 
       { 
        caseIndex=1; 
       } 
       else if (document.OrderForm.cases[0].checked = true) 
       { 
        caseIndex=2; 
       } 
      document.casepic.src = casePics[caseIndex]; 
     } 

     var monitorIndex =0; 
     function displayMonitor() 
     { 
      if (document.OrderForm.monitors[0].checked = true) 
      { 
       monitorIndex =0; 
      } 
      else if (document.OrderForm.monitors[1].checked = true) 
       { 
        monitorIndex =1; 
       } 
       else if (document.OrderForm.monitors[2].checked = true) 
       { 
        monitorIndex =2; 
       } 
       document.monitorpic.src = monitorPics[monitorIndex];    
     } 

     var printerIndex =0; 
     function displayPrinter() 
     { 
      if (document.OrderForm.printers[0].checked = true) 
      { 
       printerIndex =0; 
      } 
      else if (document.OrderForm.printers[1].checked = true) 
       { 
        printerIndex =1; 
       } 
       else if (document.OrderForm.printers[2].checked = true) 
       { 
        printerIndex =2 
       } 
      document.printpic.src = printerPics[printerIndex]; 

     } 


     function startup() 
     { 

      var casePics = new Array(3); 
      casePics[0]= new Image; 
      casepics[0].src = "case1.jpg"; 
      casePics[1]= new Image; 
      casepics[1].src = "case2.jpg"; 
      casePics[2]= new Image; 
      casepics[2].src = "case3.jpg"; 

      var monitorPics = new Array(3); 
      monitorPics[0]= new Image; 
      monitorpics[0].src = "monitor1.jpg"; 
      monitorPics[1]= new Image; 
      monitorpics[1].src = "monitor2.jpg"; 
      monitorPics[2]= new Image; 
      monitorpics[2].src = "monitor3.jpg"; 

      var printerPics = new Array(3); 
      printerPics[0]= new Image; 
      printerpics[0].src = "printer1.jpg"; 
      printerPics[1]= new Image; 
      printerpics[1].src = "printer2.jpg"; 
      printerPics[2]= new Image; 
      printerpics[2].src = "printer3.jpg"; 

      displayCase(); 
      displayMonitor(); 
      displayPrinter(); 

     } 
</script>

<body onLoad = "startup()" > 
    <h1 align="center">Computer System Order Form</h1> 
    <table border="black" cellpadding="10px" align="center">   
     <tr> 
      <td> 
       <table cellpadding="10px"> 
       <form name="OrderForm"> 
        <tr> 
         <td> 
          Computer Case Style:</br> 
          <input type="radio" name="cases" value="500.00" onchange="javascript:prices['cases'] = this.value; updateTotal();" /> Desktop Case (500.00) </br> 
          <input type="radio" name="cases" value="600.00" onchange="javascript:prices['cases'] = this.value; updateTotal();" /> Mini-Tower Case (600.00) </br> 
          <input type="radio" name="cases" value="700.00" onchange="javascript:prices['cases'] = this.value; updateTotal();" /> Full-Tower Case (700.00) </br> 
         </td> 

         <td> 
          <img name="casepic" src="case1.jpg" width="125" height="125"> 
         </td> 
        </tr> 

        <tr> 
         <td> 
          Computer Monitor: <br/> 
          <input type="radio" name="monitors" value="250.00" onchange="javascript:prices['monitors'] = this.value; updateTotal();" /> 17" LCD Flat Screen (250.00) </br> 
          <input type="radio" name="monitors" value="300.00" onchange="javascript:prices['monitors'] = this.value; updateTotal();" /> 19" LCD Flat Screen (300.00) </br> 
          <input type="radio" name="monitors" value="350.00" onchange="javascript:prices['monitors'] = this.value; updateTotal();" /> 21" LCD Flat Screen (350.00) </br> 
         </td> 

         <td> 
          <img name="monitorpic" src="monitor1.jpg" width="125" height="125"> 
         </td> 
        </tr> 

        <tr> 
         <td> 
          Computer Printer:<br/> 
          <input type="radio" name="printers" value="100.00" onchange="javascript:prices['printers'] = this.value; updateTotal();" /> Inkjet Printer (100.00) </br> 
          <input type="radio" name="printers" value="250.00" onchange="javascript:prices['printers'] = this.value; updateTotal();" /> Laser Printer (250.00) </br> 
          <input type="radio" name="printers" value="350.00" onchange="javascript:prices['printers'] = this.value; updateTotal();" /> Color Printer (350.00) </br> 
         </td> 

         <td> 
          <img name="printpic" src="printer1.jpg" width="125" height="125"/> 
         </td> 
        </tr> 
       </form> 
       </table>    

      </td> 

      <td> 
       <table padding="10px"> 
        <tr> 
        <form name="AddressForm"> 
         <td> 
          Total System Price: 
         </td> 
         <td> 
          $<input type="text" name="total" readonly value="0.00" size="8" id="total"> 
         </td> 
        </tr> 

        <tr> 
         <td> 
          &nbsp; 
         </td> 
        </tr> 

        <tr> 
         <td> 
          &nbsp; 
         </td> 

        </tr> 

        <tr> 
         <td> 
          &nbsp; 
         </td> 
        </tr> 

        <tr> 
         <td> 
          Full Name: 
         </td> 

         <td> 
          <input type="text" name="customer" /> 
         </td> 
        </tr> 

        <tr> 
         <td> 
          Street Address: 
         </td> 

         <td> 
          <input type="text" name="address" /> 
         </td> 
        </tr> 

        <tr> 
         <td> 
          City: 
         </td> 

         <td> 
          <input type="text" name="city" /> 
         </td> 
        </tr> 

        <tr> 
         <td> 
          State: 
         </td> 

         <td> 
          <select name="state"> 
           <option value=""></option> 
           <option value="DE">DE</option> 
           <option value="NJ">NJ</option> 
           <option value="NY">NY</option> 
           <option value="PA">PA</option> 
          </select> 
         </td> 
        </tr> 

        <tr> 
         <td> 
          Zip: 
         </td> 

         <td> 
          <input type="text" name="zip" /> 
         </td> 
        </tr> 

        <tr> 
         <td> 
          Phone Number: 
         </td> 

         <td> 
          <input type="text" name="phone" /> 
         </td> 
        </tr> 

        <tr> 

         <td> 
          Email Address: 
         </td> 

         <td> 
          <input type="text" name="email"> 
         </td> 
        </tr> 
        </form> 

        <tr> 
         <td> 
          &nbsp; 
         </td> 
        </tr> 

        <tr> 
         <td> 
          <input type="button" value="Submit Order" onClick="doSubmit()" /> 
         </td> 
         <td> 
          <input type="button" value="Clear Form" onClick="doClear()" /> 
         </td> 
        </tr> 
       </table>   
      </td>  
     </tr> 
    </table> 

</body>

來源

2013-11-26 user3036140

的想法？ –

你能具體嗎？只發布相關的代碼，這太大了。 – Praveen

我不知道jquery是什麼。如果這是另一種類型的html語言，那麼我不認爲我可以使用它。我會重新發布相關的代碼，對不起，我認爲如果其他功能沒有定義，它將不起作用。 – user3036140

這僅僅是一個示例代碼，這改變一個div的基於單選按鈕的選擇

HTML

<input type="radio" name="ch" value="http://www.menucool.com/slider/prod/image-slider-1.jpg" onClick="CB(this.value);" /> 
URL 1 
<input type="radio" name="ch" value="http://www.menucool.com/slider/prod/image-slider-3.jpg" onClick="CB(this.value);" /> 
URL 2 
<div id="back"> 
</div>

背景使用jQuery

JAVASCRIPT

function CB(bg) { 
var url; 
    if(bg=="yourvalue1") 
    { 
     url="http://www.menucool.com/slider/prod/image-slider-1.jpg"; 
    document.getElementById("ecard").style.backgroundImage = "url(" + url + ")"; 
    } 
    else if(bg=="yourvalue2") 
    { 
    url="http://www.menucool.com/slider/prod/image-slider-3.jpg"; 
    document.getElementById("ecard").style.backgroundImage = "url(" + url + ")";    
    } 
    }

FIDDLE TO PLAY

來源

2013-11-26 15:12:37

小提琴沒有工作..？ – aksu

@aksu檢查此http://jsfiddle.net/F6zPc/6/ –

謝謝。我發現這種方法在網上搜索，但我遇到了一個問題，這可能不是什麼大不了的事。我爲另一個必須計算選擇總數的函數定義每個單選按鈕的值。有沒有辦法在單選按鈕上做兩個值？ – user3036140

基於HTML/JavaScript中的單選按鈕選擇更改圖像

回答

相關問題