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

Question

我目前正在尝试为复选框构建一些验证功能，其中包括在全部为"is"时将所有 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)

最后，要确定某个集合是否未被选中，请找到最接近的 输入(复选框)并查看它是否也被选中:

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