我的问题卡包含 4 个要回答的问题每个答案应该是一种类型并且不应该超过一种

Question

<div class="container">
        <table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">question</th>
                <th scope="col">M</th>
                <th scope="col">L</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td><input type="radio" id="1q1m" name="fav_language" value="M"></td>
                <td><input type="radio" id="1q1l" name="fav_language" value="L"></td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>Mark</td>
                <td><input type="radio" id="1q2m" name="fav_language2" value="M"></td>
                <td><input type="radio" id="1q2l" name="fav_language2" value="L"></td>
              </tr>
              <tr>
                <th scope="row">3</th>
                <td>Mark</td>
                <td><input type="radio" id="1q3m" name="fav_language3" value="M"></td>
                <td><input type="radio" id="1q3l" name="fav_language3" value="L"></td>
              </tr>
              <tr>
                <th scope="row">4</th>
                <td>Mark</td>
                <td><input type="radio" id="1q4m" name="fav_language4" value="M"></td>
                <td><input type="radio" id="1q4l" name="fav_language4" value="L"></td>
              </tr>
         
            </tbody>
          </table>

在javascript中，如果用户选择更多，我如何确保结果只有一个选择值M选择和一个L选择将被阻止。 enter image description here

所以选择的每个列类型只被选中。

Answer 1

您可以在收音机上添加 change event handler，它会检查已经具有相同值的 :checked 收音机，然后取消设置多余的已检查收音机：

const radios = document.querySelectorAll('input[type="radio"][value="L"],input[type="radio"][value="M"]');

for(let radio of radios)
    radio.addEventListener('change',event=>{
        if(document.querySelectorAll('input[type="radio"][value="'+event.target.value+'"]:checked').length > 1)
            event.target.checked = false;
    });

当你给所有相应的收音机相同的类并通过该类选择它们时，可以写得更好一些。

---

如果您的小组中您只能有两种选择之一，请考虑给他们一个 data-* attribute 并检查一下：

const radios = document.getElementsByClassName('choice');
for(let radio of radios)
    radio.addEventListener('change',event=>{
        let selectorQuery = ''.concat(
            '.choice',
            '[data-group="'+event.target.dataset.group+'"]',
            '[value="'+event.target.value+'"]',
            ':checked'
        );
        if(document.querySelectorAll(selectorQuery).length > 1)
            event.target.checked = false;
    });

<table>
    <thead><tr><th>Choice</th><th>M</th><th>L</th></tr></thead>
    <tbody>
        <tr>
            <td>Lang 1</td>
            <td><input type="radio" class="choice" data-group="lang" name="lang1" value="M"></td>
            <td><input type="radio" class="choice" data-group="lang" name="lang1" value="L"></td>
        </tr>
        <tr>
            <td>Lang 2</td>
            <td><input type="radio" class="choice" data-group="lang" name="lang2" value="M"></td>
            <td><input type="radio" class="choice" data-group="lang" name="lang2" value="L"></td>
        </tr>
        <tr>
            <td>Alpha 2</td>
            <td><input type="radio" class="choice" data-group="alpha" name="alpha1" value="M"></td>
            <td><input type="radio" class="choice" data-group="alpha" name="alpha1" value="L"></td>
        </tr>
        <tr>
            <td>Alpha 1</td>
            <td><input type="radio" class="choice" data-group="alpha" name="alpha2" value="M"></td>
            <td><input type="radio" class="choice" data-group="alpha" name="alpha2" value="L"></td>
        </tr>
    </tbody>
</table>

如果您有 M 和 L 的选择，并尝试将 M 更改为 L，它将取消选中，因为 change 事件为时已晚。可以使用 mousedown 事件来更简单一些。

---

referenced survey 使用另一种方法：

// in the change handler:
let oppositeRadioId = this.id.slice(0,3) +
                     (this.id.slice(-1)==='m'?'l':'m');
if(document.getElementById(oppositeRadioId).checked)
    // notify that both can't be selected, and remove checked attribute of current target

他们不按name属性分组，而是按id分组，并查找对应的对应项，如果已选中，则取消选中当前单击的单选按钮。您也可以将它与您的 id 命名方案一起使用。

Answer 2

我知道会询问 javascript 代码，但如果可以检查两个列的单选按钮，那么您可以使用单选组（不需要 javascript）。

见https://www.w3schools.com/tags/att_input_type_radio.asp

<div class="container">
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">question</th>
                <th scope="col">M</th>
                <th scope="col">L</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td><input type="radio" id="1q1m" name="fav_languageM" value="M"></td>
                <td><input type="radio" id="1q1l" name="fav_language" value="L"></td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Mark</td>
                <td><input type="radio" id="1q2m" name="fav_languageM" value="M"></td>
                <td><input type="radio" id="1q2l" name="fav_language" value="L"></td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Mark</td>
                <td><input type="radio" id="1q3m" name="fav_languageM" value="M"></td>
                <td><input type="radio" id="1q3l" name="fav_language" value="L"></td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td>Mark</td>
                <td><input type="radio" id="1q4m" name="fav_languageM" value="M"></td>
                <td><input type="radio" id="1q4l" name="fav_language" value="L"></td>
            </tr>
        </tbody>
    </table>
</div>

Answer 3

只需为 isSelected 使用一个函数，就像当您选择一个按钮时使 isSelected 为真。

例子：-

 let isSelectedM = false; //declare as a global variable
 let isSelectedL = false;
//function invoke when user select
function check(){
 
   
  if(isSelectedM==false){
     // make it possible
     isSelectedM = true;
  }else{
    // already checked
  }
   // for L also
  if(isSelectedL==false){
     // make it possible
     isSelectedL = true;
  }else{
    // already checked
  }

}