Question

我目前正在尝试为复选框构建一些验证功能，其中包括将所有6都标记为绿色，如果全部为是，如果未选中则为黄色，如果未选中则为x。

它似乎工作得很好，除非我添加它们后删除以前的颜色。当我尝试选择另一个时，我尝试从不同的图像中删除。但是当我尝试时没有太多运气。

我非常需要一种方法来查看每当加载i类时，它会删除任何其他标记

这意味着当没有勾选某些东西时会感到惊讶，当没有勾选时为X，并且在所有6上都是绿色。

FIDDLE： https://jsfiddle.net/3c1vhkwf/1/

 $(document).ready(function() {

      $('head').append('<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" />');

      $('.chkValidation input').change(function() {

        $('input[name="' + this.name + '"]').not(this).prop('checked', false);

        if(checkValues())
        {
          if($('.chkValidation :checked').size() == 6)
          {
            $('<i class="fa fa-check" aria-hidden="true" style="color:green; display:inline-block;"></i>').insertAfter('.chkValidation :checked');
          }
          else
          {
            $('<i class="fa fa-exclamation-circle" aria-hidden="true" style="color:orange"></i>').insertAfter(this);
          }
        }
        else
        {
          $('<i class="fa fa-times" aria-hidden="true" style="color:red"></i>').insertAfter(this);
        }

      });

      function checkValues(){
        var valid = true;
        $('.chkValidation input[type=checkbox]').each(function() {   
         if($(this).prop('checked'))
         {
            if($(this).prop('value') == "No")
            {
                valid = false;
            }
         }
        })
        return valid;
      }
    });

Answer 1

您应该创建可以附加到需要验证的元素的类：

.error:after {
  content: '\f00d';
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  margin: 0px 0px 0px 10px;
  text-decoration: none;
  color: red;
}

因为您只想检查所有选项，所以如果选中其他框，则很难将它们返回到先前的状态。我决定让fieldset本身变绿，但你可以做很多不同的事情。对于这些检查，您需要检查相同数量的Yes复选框是否与检查的数量相匹配：

$('.chkValidation').find('input[value=Yes]:checked').length === $('.chkValidation').find('input[value=Yes]').length`

如果没有选中No的话：

$('.chkValidation').find('input[value=No]:checked').length === 0)

最后，要弄清楚是否未检查集合，请找到closest输入（复选框）并查看是否也检查了它：

var yes = $this.closest('fieldset').find('input[value=Yes]').prop('checked');
var no = $this.closest('fieldset').find('input[value=No]').prop('checked');
if (no)
  $fieldset.addClass('error');
if (!yes && !no)
  $fieldset.addClass('warn');

JSFiddle

Answer 2

我调查了你的小提琴但是html都混乱了。无论如何我可以看到我相信你可以做这样的事情，让我们说如果选中所有复选框是的，你可以通过定位他们的类来隐藏感叹号图标：

if($('.chkValidation :checked').size() == 6){
  $(".fa-exclamation-circle").hide(); //hides all exclamation icons

删除复选框刻度上的元素，添加其他元素

2 个答案: