Хороший и ЧИСТЫЙ способ проверить это? (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

Что конкретная проблема или вопрос? * «не хватает» * ничего нам не говорит. Потратьте некоторое время, чтобы просмотреть [ask] – charlietfl

@charlietfl, если вы прочтете прошлое, что он вам говорит. – fiterpilot

Если вы можете использовать JQuery это довольно просто ...

var clickedID; 
$(document).ready(function(){ 
    $('radio').on('click'),function(){ 
    clickedID = $(this).attr("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)

ответ

Смежные вопросы