javascript - 好的和干净的方法来检查这个？ (JS + HTML)

Question

我正在尝试制作一个系统来检查按下了哪个单选按钮。 (旁注总是会有 1 个检查。)我目前拥有的代码相当缺乏，我不完全确定如何改进。有帮助吗？？

注意:我有多个看起来像这样的“系统”，所以我只给你 1 个 block 。也就是说，有多个这样的 block 。我需要一种方法来简化这方面的工作。

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);
}

Answer 1

如果您会使用 jQuery，那将相当简单...

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

这将为您提供已单击的任何 radio 元素的 ID。然后你可以用它做你想做的事。