刪除複選框上的元素滴答作用，其中添加其他元素

我目前正在嘗試構建複選框的一些驗證功能，其中包括勾選所有6爲綠色，當所有都是，如果不選中黃色，如果沒有選中x。刪除複選框上的元素滴答作用，其中添加其他元素

它似乎工作正常，除非刪除以前的顏色，一旦我已經添加它們。我試圖從另一幅圖像中刪除不同的圖像，但當我嘗試這些圖像時沒有太大的運氣。

我非常需要一種方式來看待每當我類被加載，它將刪除任何其他標記

它的意思的工作是有感嘆號當事情沒有打勾，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; 
     } 
    });

來源

2017-09-22 DevAL

我不使用jQuery，但你似乎是添加每個更改事件的新元素。您應該只是在更改元素上添加/刪除類。 [MDN classList API]（https://developer.mozilla.org/en-US/docs/Web/API/Element/classList） –

你應該可以附加類到了需要驗證的元素的話：

.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

來源

2017-09-22 13:59:48

嗨，正如我在其他評論中提到的，這是來自一個具有表單組件的軟件，在添加自定義類時運氣不是很好，否則它會在公園散步！這看起來好像很好，我會看看是否有任何可以插入的方式。 – DevAL

哦，我明白了。那麼你有什麼控制權？我看到你插入引導CSS，所以你爲什麼不能插入自己的？您可以自由地將類添加到jQuery元素中，而無需訪問HTML。 –

我想，管理它。你的回答是絕對正確的，現在我的問題已經被標記爲答案。 – DevAL

我看着你的小提琴，但HTML都是混亂的。反正從我所看到的，我相信你可以做這樣的事情，可以說，如果所有的複選框被選中是的，你隱藏的感嘆號圖標，通過針對他們的階級：

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

來源

2017-09-22 13:22:33 Laiman

這是來自Laserfiche的形式，不幸的是沒有太多希望擺脫意大利麪條。我會給它一個！ – DevAL

刪除複選框上的元素滴答作用，其中添加其他元素

回答

相關問題