javascript - 删除复选框打勾上的元素，这会添加其他元素

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

似乎工作正常，除了我添加完以前的颜色后，将其删除。当选择另一个图像时，我尝试从不同的图像中删除。但是当我尝试该图像时，运气并不好。

我几乎需要一种方法来查看何时加载i类，它会删除任何其他标签

它的工作原理是：未勾选时表示感叹；如果否，则表示X； 6表示绿色。

小提琴：
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;
      }
    });

最佳答案

您应该制作可以附加到需要验证的元素上的类：

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

因为只想检查是否已全部选中，所以例如，如果选中了另一个框，则很难将它们返回到以前的状态。我决定只将字段集本身设为绿色，但是您可以做很多不同的事情。对于这些检查，您需要检查相同数量的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

关于javascript - 删除复选框打勾上的元素，这会添加其他元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46365384/