i have question card contains 4 questions to be answered each answer should be one type and the shou-CodePudding

<div >
        <table >
            <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>

in javascript how i can make sure the result only one choice of value M selected and one L selected if user to select more will be prevented. enter image description here

so each column type on choice only selected.

CodePudding user response：

You could add a change event handler on the radios, which checks for already :checked radios of the same value, and then unsets the excess checked radio:

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

Could be written a bit nicer when you give all respective radios the same class and select them via that class.

CodePudding user response：

Just Use a function for isSelected like when you select a button make isSelected True.

exmaple:-

 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
  }

}

Like if it Helpful

CodePudding user response：

I know a javascript code is asked but if for both column the radio button can be check then you can use radio group (no javascript required).

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

<div >
    <table >
        <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>