Question

我正在尝试制作一个能够检查按下单选按钮的系统。（侧面注意总会有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);
}

Answer 1

如果你可以使用jQuery，那就相当简单......

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

这将为您提供已点击任何无线电元素的ID。那么你可以用它做你想做的事。

Answer 2

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

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

1）返回所有选中的单选按钮

2）将他们的ID输出到控制台。

Answer 3

如果您不想使用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>

好的和干净的方式检查这个？（JS + HTML）

3 个答案:

好的和干净的方式检查这个？ （JS + HTML）

3 个答案:

好的和干净的方式检查这个？（JS + HTML）