如果在表單提交期間未選中復選框，則它將變為紅色

Question

我有一個注冊表格，我有兩個復選框。 如果未選中並且客戶端點擊注冊按鈕，則它將變為紅色。

以下是我的復選框代碼： -

 $('#age_confirmation').change(function(){ var c = this.checked ? '' : 'red'; $('#age_confirmation').css('color', c); }); $('#terms_of_service').change(function(){ var c = this.checked ? '' : 'red'; $('#terms_of_service').css('color', c); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off"> <div style="display:none"></div> <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> Age Confirmation <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> Terms of Service <input type="submit" class="btn btn-tiffany" value="register" /> </form> 

誰能告訴我哪里錯了。 任何幫助將不勝感激。

Answer 1

您需要使用label標簽包含輸入的兄弟文本以及相關標簽的輸入更改顏色的更改。 設置復選框input的顏色不會影響其旁邊文本的顏色。

 $('#age_confirmation').change(function(){ var c = this.checked ? '' : 'red'; $('#age_confirmation').next().css('color', c); }) $('#terms_of_service').change(function(){ var c = this.checked ? '' : 'red'; $('#terms_of_service').next().css('color', c); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off"> <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> <label for="age_confirmation">Age Confirmation</label> <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> <label for="terms_of_service">Terms of Service</label> <input type="submit" class="btn btn-tiffany" value="register" /> </form> 

您也可以簡化代碼

 $('#register :checkbox').change(function(){ $(this).next().css('color', this.checked ? '' : 'red'); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off"> <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> <label for="age_confirmation">Age Confirmation</label> <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> <label for="terms_of_service">Terms of Service</label> <input type="submit" class="btn btn-tiffany" value="register" /> </form> 

Answer 2

您正在收聽每個復選框上的change事件。 閱讀你的問題，我認為你想要處理表單的submit事件，然后向用戶提供一些反饋，比如...

編輯：您需要將復選框文本包裝在<label>中以查看顏色變化，如@Juan Mendes在其答案中所述

<input id="age_confirmation" ...><label for="age_confirmation">Age</label>

<script>
const age = $('#age_confirmation');
const terms = $('#terms_of_service');
$('#register').submit(function() {
  age.next().css('color', age.checked ? '' : 'red');
  terms.next().css('color', terms.checked ? '' : 'red');
  return age.checked && terms.checked;
})
</script> 

Answer 3

 function check(){ if(document.getElementById("age_confirmation").checked ==false){ $("#lbl_age_confirmation").css("color","red"); }else{ $("#lbl_age_confirmation").css("color","black"); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off"><div > <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> <lable id="lbl_age_confirmation">Age Confirmation</lable> <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> Terms of Service <input onclick="check()" type="submit" class="btn btn-tiffany" value="register" /> </form> 

Answer 4

在您的代碼中，進行了以下更改，

1. 在您的復選框文本中添加了Span和ID ，用於文本着色。
2. 在表單提交中添加了novalidate屬性，因為它阻止了jQuery操作。

 $('#age_confirmation').change(function() { var c = this.checked ? '' : 'red'; $('#age_confirmation_span').css('color', c); }); $('#terms_of_service').change(function() { var c = this.checked ? '' : 'red'; $('#terms_of_service_span').css('color', c); }); $("#register").submit(function() { var returnStatus = true; if ($('#age_confirmation').is(":checked") == true) { $('#age_confirmation_span').css('color', ''); } else { $('#age_confirmation_span').css('color', 'red'); returnStatus = false; } if ($('#terms_of_service').is(":checked") == true) { $('#terms_of_service_span').css('color', ''); } else { $('#terms_of_service_span').css('color', 'red'); returnStatus = false; } return returnStatus; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off" novalidate> <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10" /><span id="age_confirmation_span"> Age Confirmation</span> <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11" /><span id="terms_of_service_span"> Terms of Service</span> <input type="submit" class="btn btn-tiffany" value="register" /> </form> 

Answer 5

另一種方法是使用CSS選擇器和一些JS。 首先，你需要包裝你的文字以影響顏色，正如其他用戶在這里所說的那樣......

<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">
   <input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/>
   <label for="age_confirmation">Age Confirmation</label>

   <input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>
   <label for="terms_of_service">Terms of Service</label>

   <input type="submit" class="btn btn-tiffany" value="register" />
</form>

然后，您可以使用純CSS選擇invalid input旁邊的所有label ：

 :invalid + label {
   color: red;
 }

但是，這會在您按下提交按鈕之前選擇標簽。 所以，我們將使用javascript附加一個類來識別submitting狀態......

$('input[type=submit]').click(function() {
  $('#register').addClass('submitting');
});

然后我們可以使用CSS匹配這個...

.submitting :invalid + label {
  color: red;
}

你會在這里找到一個有效的例子： https ： //jsfiddle.net/yL7je0ap/

此解決方案的優點

• 保持CSS和JS之間的清晰分離
• 使用內置的HTML5驗證功能
• 不需要傾聽每一個變化

Answer 6

您可以使用JavaScript執行此操作，如下所示：

<script type="text/javascript">
    function validateForm(form){
        if (form.agreement.checked==false){
            alert("Please agree to our Terms and Conditons."); //Here you can do some styling
            //document.getElementById('terms_of_service').classList.add('redColor')
            return false;
        }else{
            //document.getElementById('terms_of_service').classList.add('whiteColor')
        }
    }
</script>