JS - 是/否选项更改检查是否选择了所有“否”选项

Question

如何检查是/否表中是否选择了所有“否”答案，这必须检查对任何“是/否”答案的每次更改，然后如果选择了所有“否”则发送警报

尝试以下但没有看到反应..

$('.mb-n').change(function(){
  if ($('.mb-n:checked').length == $('.mb-n').length) {
    alert('all no ');
    }  else { alert('all y '); 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="mb-odd">
  <td class="mb-prompt"><span>Q1.</span></td>
  <td class="mb-y"><input type="radio" name="123" value="Y" class="{required: true, messages:{required:''}}" rel="" id="123_Y"></td>
  <td class="mb-n"><input type="radio" name="123" value="N" checked="checked" id="123_N" rel=""></td>
  </tr>
</table>

Answer 1

使用vanilla JavaScript：

function listenForInputChange ()
{
  // Get all inputs with a NO value and spread them into an array 
  let inputs = [ ...document.querySelectorAll( '.mb-n > input' ) ];

  // Add input event listener on table and listen for change
  document.querySelector( 'table' ).addEventListener( 'input', evt => {

    // if every inputs are checked
    if ( inputs.every( input => input.checked ) )
    {
      // Do something...
      console.log( 'All answers are NO' );
    }

  }, false );
}

listenForInputChange();

<table>
  <tr class="mb-odd">
  <td class="mb-prompt"><span>Q1.</span></td>
  <td class="mb-y"><input type="radio" name="q1" value="Y"></td>
  <td class="mb-n"><input type="radio" name="q1" value="N" checked></td>
  </tr>
  
  <tr class="mb-even">
  <td class="mb-prompt"><span>Q2.</span></td>
  <td class="mb-y"><input type="radio" name="q2" value="Y"></td>
  <td class="mb-n"><input type="radio" name="q2" value="N" checked></td>
  </tr>

  <tr class="mb-odd">
  <td class="mb-prompt"><span>Q3.</span></td>
  <td class="mb-y"><input type="radio" name="q3" value="Y"></td>
  <td class="mb-n"><input type="radio" name="q3" value="N" checked></td>
  </tr>
</table>

Answer 2

您需要检查radio是否是checked，而不是检查td（<td>没有checked属性）。

我对你的代码做了一些调整，包括修改HTML，这有点奇怪。我为所有单选按钮添加了类似的类，并为所有YES无线电和无线电添加了类似的类，这样您就可以更好地控制所选内容和不选内容。

检查下面

$('.radioBtn').change(function(){
  if ($('.radioNo:checked').length == $('.mb-n').length) {
    console.log('all no');
  } else if ($('.radioYes:checked').length == $('.mb-y').length){ 
    console.log('all yes'); 
  }else{
    console.log("Some Yes and some No")
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="mb-odd">
    <td class="mb-prompt"><span>Q1.</span></td>  
    <td class="mb-y">
      <input type="radio" name="123" value="Y" class="radioBtn radioYes" id="123_Y">YES
    </td>
    <td class="mb-n">
      <input type="radio" name="123" value="N" class="radioBtn radioNo" checked id="123_N" >NO
    </td>  
  </tr>
  <tr class="mb-odd">
    <td class="mb-prompt"><span>Q2.</span></td>
    <td class="mb-y">
      <input type="radio" name="1234" value="Y" class="radioBtn radioYes" id="1234_Y">YES
    </td>
    <td class="mb-n">
      <input type="radio" name="1234" value="N" class="radioBtn radioNo" checked id="1234_N" >NO
    </td>  
  </tr>
  <tr class="mb-odd">
    <td class="mb-prompt"><span>Q3.</span></td>
    <td class="mb-y">
      <input type="radio" name="12345" value="Y" class="radioBtn radioYes" id="12345_Y">YES
    </td>
    <td class="mb-n">
      <input type="radio" name="12345" value="N" class="radioBtn radioNo" checked id="12345_N" >NO
    </td>
  </tr>
</table>

Answer 3

假设表中的每一行都有一个复选框，您应该可以这样做，而无需更改设置中的任何内容：

$('.mb-n').change(function(){
   if ($("table").find("tr").length == $(".mb-n > input[type='radio']:checked").length)
       window.alert("Oh noes...");
});