Question

我在表格的“ td”标记内有复选框，例如

     <td>    
    <input gender="Female" id="5c6434a8590a0654a0002b5a" academicyearid="5b879ec6590a062ba4005fdb" type="checkbox">
    </td>  

    <td>    
    <input gender="Female" id="5c6434a8590a0654a0002b0a" academicyearid="5b879ec6590a062ba4005fdb" type="checkbox">
    </td>    

     <td>    
    <input gender="Male" id="5c6434a8590a0654a0002b04" academicyearid="5b879ec6590a062ba4005fdb" type="checkbox">
    </td>

在JQuery中，我在下面的代码行中进行了调整

    function onSubmit()
    {  
        $('.commoncheckbox input:checked').each(function () {

          var gender = $(this).attr('gender');    
          alert("only students of one gender can be selected"); 
         });
    }

基本上，我希望用户单击提交按钮和onSubmit按钮事件时，它将检查选中了哪些复选框，以及它们的性别是否不同，然后它应该显示警告消息，说“只能选择一种性别的学生” < / p>

请帮助!!!

Answer 1

如果可以根据良好的选择器来做您想做的事，它看起来就像一个

// if there is both male & female checkboxes checked
if ($('input[gender="Male"]:checked').length && $('input[gender="Female"]:checked').length) {

// display alert message

}

还是我在理解您的问题时犯了一个错误？

Answer 2

function validateGender(){
  const uniqGenderSet = new Set();
  $('table input:checked').each(function () {
        uniqGenderSet.add($(this).attr('gender'));
  });
  if (uniqGenderSet.size > 1) 
        alert("only students of one gender can be selected");
}

$('button').click(function() {
  validateGender();
});

input[gender="Female"]{
  outline: 1px solid pink;
}
input[gender="Male"]{
  outline: 1px solid skyblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>    
    <input gender="Female" id="5c6434a8590a0654a0002b5a" academicyearid="5b879ec6590a062ba4005fdb" type="checkbox">
    </td>  

    <td>    
    <input gender="Female" id="5c6434a8590a0654a0002b0a" academicyearid="5b879ec6590a062ba4005fdb" type="checkbox">
    </td>    

     <td>    
    <input gender="Male" id="5c6434a8590a0654a0002b04" academicyearid="5b879ec6590a062ba4005fdb" type="checkbox">
    </td>
</tr>
</table>
<button>Vaidate</button>

Answer 3

将const用于其他性别，并为其指定预定义的性别

- name: Ensure that free space on the tested volume is greater than 15%
  assert:
    that:
      - mount.size_available > mount.size_total|float * 0.15
    msg: Disk space has reached 85% threshold
  vars:
    mount: "{{ ansible_mounts | selectattr('mount','equalto',item.mount) | list | first }}"
  with_items:
    - "{{ ansible_mounts }}"

var gender;
var othergender;
$(document).ready(function(){
$('.a').change(function(){

othergender=$(this).val()
$('.a').prop("disabled",true)
})
  $('.b').change(function(){
         
          gender=$(this).attr('gender');
          console.log(gender)
          if(gender != othergender)// just an idea  
          {
          alert("only students of one gender can be selected"); 
          $(this). prop("checked", false);
          $('.a').prop("disabled",false)
          $('.a').prop("checked", false);
          othergender='';
          }

  })
})

Answer 4

如果您可以访问用户性别，为什么不使用jquery添加使用.prop('checked', true);检查的属性

var gender='male';
if(gender=='male'){

  $('#input').prop( "checked" );
}

<html>
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body>
<input type='checkbox' id='check' checked='false'>
<label for="check">Check me</label>
</body>

</html>

Answer 5

您可以使用此：

var selectedGender;
$('.commoncheckbox input:checked').each(function () {
    var gender = $(this).attr('gender');
    if(selectedGender & selectedGender !== gender) {
       alert("only students of one gender can be selected");
    }
    selectedGender = gender;
});

如何使用复选框检查是否选择了相同性别？

5 个答案: