Question

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

尝试了以下内容，但未见任何响应。

$('.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

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

我对您的代码做了一些调整，包括对HTML的修改，这有点奇怪。我在所有单选按钮中添加了一个类似的类，并在所有YES收音机和NO收音机中添加了一个类似的类，这样您就可以更好地控制选择的内容和未选择的内容。

在下面检查

$('.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 2

使用原始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 3

假设表格中的每一行都有一个复选框，那么您应该能够做到这一点而无需更改设置：

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

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

3 个答案: