javascript - 根据一系列单选按钮对的状态进行计算的好方法是什么？

Question

我有一个包含未知行数的表格，每个都有两个名为 weight[i] 和 Winner[i] 的单选按钮，并带有诸如 weight11、weight12、weight21、weight22、winner11、winner12 等的 ID...

我正在尝试创建一个循环来计算所有这些单选按钮的值的乘积之和。

当单选按钮的名称包含变量时，我无法编写正确的查询以获取单选按钮的值。

你能看到正确的查询是什么，或者你能看到一个不同的解决方案吗？

我尝试使用 php 进行循环，但我无法获取 php 中行数的值，因为它可以动态更改而无需重新加载表。

桌子：

<table class="comparisontable" id="ComparisonTable">
    <col width=15%>
    <col width=15%>
    <col width=20%>
    <col width=5%>
    <col width=20%>
    <col width=25%>
    <tr>
        <th class="headingleft">Criteria</th>
        <th class="headingcenter">Criteria weight</th>
        <th class="headingcenter"><p><p><input onClick="this.setSelectionRange(0, this.value.length)" onMouseOver="this.style.cursor='pointer'" class="productchoice" type="text" id="productA" name="productA" value = "<?php echo $array[0]["ProductA"];?>"></p><p id=prodscoreA>Score: </p></th> 
        <th class="headingcenter">
        <th class="headingcenter"><p><p><input onClick="this.setSelectionRange(0, this.value.length)" onMouseOver="this.style.cursor='pointer'" class="productchoice" type="text" id="productB" name="productB" value = "<?php echo $array[0]["ProductB"];?>"></p><p id=prodscoreB>Score: </p></th>
        <th class="headingleft">Comment</th>
    </tr>


<!-- Criteria rows creation and loading, in a loop: -->
    <?php
        $i = 1; 
        while($array[$i-1]["FormNumber"]) {
    ?>

    <tr>
        <td class="criteria"><input onClick="this.setSelectionRange(0, this.value.length)" onMouseOver="this.style.cursor='pointer'" class="criteriainput" type="text" id="criteria<?php echo "$i";?>" name="criteria[<?php echo "$i";?>]" value="<?php echo $array[$i-1]["Criteria"];?>"></td>
        <td class="weight">
            <li class="star-weight">
                <input type="radio" onclick="CalculateScores()" name="weight[<?php echo "$i";?>]" id="weight<?php echo "$i";?>3" value="3" <?= $array[$i-1]["Weight"] == "3" ? 'checked' : '' ?> /><label for="weight<?php echo "$i";?>3"></label>
                <input type="radio" onclick="CalculateScores()" name="weight[<?php echo "$i";?>]" id="weight<?php echo "$i";?>2" value="2" <?= $array[$i-1]["Weight"] == "2" ? 'checked' : '' ?> /><label for="weight<?php echo "$i";?>2"></label>
                <input type="radio" onclick="CalculateScores()" name="weight[<?php echo "$i";?>]" id="weight<?php echo "$i";?>1" value="1" <?= $array[$i-1]["Weight"] == "1" ? 'checked' : '' ?> /><label for="weight<?php echo "$i";?>1"></label>
            </li>
        </td>
        <td class="winner">
            <input type="radio" onclick="CalculateScores()" name="winner[<?php echo "$i";?>]" id="winner<?php echo "$i";?>10000" value="10000" <?= $array[$i-1]["Winner"] == "10000" ? 'checked' : '' ?>> Winner</input><br>
            <textarea class="commentinput" name="commentA[<?php echo "$i";?>]" id="commentA<?php echo "$i";?>" cols="1" rows="3"><?php echo $array[$i-1]["CommentA"];?></textarea>
        </td>
        <td>
            <input type="radio" onclick="CalculateScores()" name="winner[<?php echo "$i";?>]" id="winner<?php echo "$i";?>100" value="100" <?= $array[$i-1]["Winner"] == "100" ? 'checked' : '' ?>> Tie</input><br>
            <input class="hidden" type="radio" name="winner<?php echo "$i";?>" id="winner<?php echo "$i";?>0" value="0" <?= $array[$i-1]["Winner"] == NULL ? 'checked' : '' ?>><br>
        </td>
        <td class="winner">
            <input type="radio" onclick="CalculateScores()" name="winner[<?php echo "$i";?>]" id="winner<?php echo "$i";?>1" value="1" <?= $array[$i-1]["Winner"] == "1" ? 'checked' : '' ?>> Winner</input><br>
            <textarea class="commentinput" name="commentB[<?php echo "$i";?>]" id="commentB<?php echo "$i";?>" cols="1" rows="3"><?php echo $array[$i-1]["CommentB"];?></textarea>
        </td>
        <td class="comment">
            <textarea class="commentinput" name="comment[<?php echo "$i" ;?>]" id="comment<?php echo "$i" ;?>" cols="1" rows="4"><?php echo $array[$i-1]["Comment"];?></textarea>
        </td>
    </tr>

    <?php
            $i++;
        }
    ?>

</table>

Javascript函数：

function CalculateScores() {
    // Sum of product of weights and winners:
    var SumProd = 0;
    var l = 1;
    var rows = document.getElementById("ComparisonTable").rows.length;
    while(l < rows) {
        SumProd += document.querySelector('input[name="weight[" + l + "]"]:checked').value*document.querySelector('input[name="winner[" + l + "]"]:checked').value;
        l++;
    }

我希望 SumProd 等于所检查的重量 [l] 和获胜者 [l] 单选按钮的乘积之和。

标签： javascript

Answer 1

查看内联注释，但不要忘记您应该name为每组单选按钮使用唯一的属性值，并且您需要使用直引号，而不是智能引号。

// Get all the rows into an array:
let rows = Array.prototype.slice.call(document.querySelectorAll("tr"));

let sum = 0;

document.querySelector("button").addEventListener("click", function(){

  // Loop over the array
  rows.forEach(function(row){
    // Get the selected radio button
    let checkedButton = row.querySelector(":checked");
    
    // If a selection was made, add the value (converted to a number) of the checked radio button to the sum
    if(checkedButton !== null){
      sum += +checkedButton.value;
    }
  });

  console.log(sum);  // Output result
});

<table>
  <tr>
    <td>Choice 1:<input type="radio" value="5" name="g1"> Choice 2:<input type="radio" value="10" name="g1"></td>
  </tr>
  <tr>
    <td>Choice 1:<input type="radio" value="15" name="g2"> Choice 2:<input type="radio" value="20" name="g2"></td>
  </tr>
  <tr>
    <td>Choice 1:<input type="radio" value="25" name="g3"> Choice 2:<input type="radio" value="30" name="g3"></td>
  </tr>
  <tr>
    <td>Choice 1:<input type="radio" value="35" name="g4"> Choice 2:<input type="radio" value="40" name="g4"></td>
  </tr>
  <tr>
    <td>Choice 1:<input type="radio" value="45" name="g5"> Choice 2:<input type="radio" value="50" name="g5"></td>
  </tr>
</table>

<button>Get Sum</button>

更新：

对于您的场景，在循环内，您只需要获取检查的重量和检查的获胜者单选按钮值，将它们相乘，然后将结果添加到最终总和中：

  // Loop over the array
  rows.forEach(function(row){
    // Get the selected radio buttons
    let weight = row.querySelector("[name^='weight']:checked");
    let winner = row.querySelector("[name^='winner']:checked");

    // If a selection was made, multiply the values (converted to a number) 
    // of the checked radio buttons and add to the sum
    if(weight && winner){
      sum += (+weight.value * +winner.value);
    }
  });