好和乾淨的方式來檢查這個？（JS + HTML）

我想製作一個系統來檢查單選按鈕是否被按下。（注意，總是會有1個選項。）我目前使用的代碼相當缺乏，我不完全確定如何改進。任何幫助？好和乾淨的方式來檢查這個？（JS + HTML）

注：我有多個'系統'，看起來就像這樣，所以我只給你1塊。這就是說，有這樣的多個塊。我需要一種方法來讓我的這一切變得簡單。

HTML：

<div class="panel"> 
      <div class="panel-header">Storage</div> 
      <div class="panel-body"> 
       <div class="container-fluid"> 
        <div class="row"> 
         <div class="col-sm-4 col-md-2"> 
          <input name="STORAGE" type="radio" id="STORAGE" checked> 
          <label class="radio" for="STORAGE"> 
           <center> 
           <img src="../images/Parts/Western_Digital_Caviar_Blue_320GB.png" class="comp-img"><br><br> 
           <p>320GB Western Digital Caviar Blue 3.5" 7200RPM HDD</p> 
           </center> 
          </label> 
         </div> 

         <div class="col-sm-4 col-md-2"> 
          <input name="STORAGE" type="radio" id="STORAGE2"> 
          <label class="radio" for="STORAGE2"> 
           <center> 
           <img src="../images/Parts/Western_Digital_Caviar_Blue_320GB.png" class="comp-img"><br><br> 
           <p>500GB Western Digital WD5000AAKX 3.5" 7200RPM HDD</p> 
           <p class="money">+$55</p> 
           </center> 
          </label> 
         </div> 

         <div class="col-sm-4 col-md-2"> 
          <input name="STORAGE" type="radio" id="STORAGE3"> 
          <label class="radio" for="STORAGE3"> 
           <center> 
           <img src="../images/Parts/Western_Digital_Caviar_Blue_320GB.png" class="comp-img"><br><br> 
           <p>1TB Western Digital WD10EZEX 3.5" 7200RPM HDD</p> 
           <p class="money">+$55</p> 
           </center> 
          </label> 
         </div> 
        </div> 

        <div class="row"> 
         <div class="col-sm-4 col-md-2"> 
          <input name="SSD" type="radio" id="SSD" checked> 
          <label class="radio" for="SSD"> 
           <center> 
           <img src="../images/Parts/None.png" class="comp-img"><br><br> 
           </center> 
          </label> 
         </div> 

         <div class="col-sm-4 col-md-2"> 
          <input name="SSD" type="radio" id="SSD2"> 
          <label class="radio" for="SSD2"> 
           <center> 
           <img src="../images/Parts/A-DATA_SSD.png" class="comp-img"><br><br> 
           <p>120GB A-Data ASP550SS3-120GM-C SSD</p> 
           <p class="money">+$40</p> 
           </center> 
          </label> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div>

JS：

function Check(){ 
    if(document.getElementById('STORAGE3').checked & HDD3Clicked==0){ 
     if (HDD2Clicked>0) { 
      HDD2Clicked = 0; 
      HDD3Clicked = 1; 
     }else{ 
      HDD3Clicked = 1; 
      Adding(+55); 
      console.log("Adding"); 
     } 
    }else if (document.getElementById('STORAGE2').checked & HDD2Clicked==0) { 
     if (HDD3Clicked>0) { 
      HDD2Clicked = 1; 
      HDD3Clicked = 0; 
     }else{ 
      HDD2Clicked = 1; 
      Adding(+55); 
      console.log("Adding"); 
     } 
    }else if (document.getElementById('STORAGE').checked & HDD3Clicked>0) { 
     HDD3Clicked = 0; 
     Adding(-55); 
     console.log("Subtracting"); 
    }else if(document.getElementById('STORAGE').checked & HDD2Clicked>0){ 
     HDD2Clicked = 0; 
     Adding(-55); 
     console.log("Subtracting"); 
    } 

    setTimeout(function() {Check()}, 5000); 
}

來源

2016-07-20 fiterpilot

有什麼具體問題或問題？ *「相當缺乏」*不會告訴我們任何事情。花點時間回顧一下[問] – charlietfl

@charlietfl如果你讀過它告訴你的。 – fiterpilot

如果你可以使用jQuery這是相當簡單的...

var clickedID; 
$(document).ready(function(){ 
    $('radio').on('click'),function(){ 
    clickedID = $(this).attr("id"); 
    }); 
});

這會給你已經點擊了哪個無線電元素的ID。然後你可以用它做你想要的。

來源

2016-07-20 16:31:52 TheValyreanGroup

太棒了！這正是我需要的！謝謝。 – fiterpilot

var radioButtons = selectorQueryAll("input[type=radio]:checked"); 

for (button in radioButtons) { 
    console.log(button.id); 
}

1）返回所有選中單選按鈕

2）輸出其ID到控制檯。

來源

2016-07-20 16:31:41 K48

我會選擇你的，但有一個工作更好一點（走出循環）。 – fiterpilot

如果你不想使用jQuery，這是一個純JavaScript解決方案：

<input type="radio" name="radioGroup" onclick="handleClick(this);" value="1"/> 
<input type="radio" name="radioGroup" onclick="handleClick(this);" value="2" /> 

<script> 
    var handleClick = function(e){ 
     alert(e.value); 
    } 
</script>

來源

2016-07-20 16:36:16 tocqueville

好和乾淨的方式來檢查這個？ （JS + HTML）

回答

相關問題

好和乾淨的方式來檢查這個？（JS + HTML）