如何通過多個無線電輸入檢測是否選擇了無線電輸入？

我想寫一些常見的jQuery代碼來驗證表單。這裏是我的代碼：如何通過多個無線電輸入檢測是否選擇了無線電輸入？

<html> 
 

 
<head> 
 
    <title>jquery</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     $('.registerBtn').on({ 
 
     click: function(evnt) { 
 

 
      $('input[type=radio]').each(function() { 
 
      if (!$(this).is(':checked')) { 
 
       var CLASS = $(this).parent().parent().css({ 
 
       'background': 'red' 
 
       }); 
 
       console.log(CLASS); 
 
      } 
 

 

 
      }); 
 
      evnt.preventDefault(); 
 
      var radioInput = $(".required:checked").val(); 
 
      console.log(radioInput); 
 
     } 
 
     }); 
 
    }); 
 
    </script> 
 

 
</head> 
 

 
<body> 
 
    <form action="#"> 
 
    <div class="form-group"> 
 
     <div class="small"> 
 
     <input type="radio" name="sex" value="Male" class="required"> Male 
 
     </div> 
 

 
     <div class="small"> 
 
     <input type="radio" name="sex" value="Female" class="required"> Female 
 
     </div> 
 

 
    </div> 
 

 
    <div class="form-group"> 
 

 
     <div class="small"> 
 
     <input type="radio" name="abc" value="Male" class="required"> text1 
 
     </div> 
 

 
     <div class="small"> 
 
     <input type="radio" name="abc" value="Female" class="required"> text2 
 
     </div> 
 

 
    </div> 
 

 

 

 
    <input type="submit" value="Submit" class="registerBtn"> 
 
    </form> 
 

 

 
</body> 
 

 
</html>

有無線輸入的2個部分。如果我爲第一部分選擇一個選項並點擊提交按鈕，那麼第二部分的背景應該是紅色的。但是兩個部分被設置爲紅色。任何幫助將不勝感激。

來源

2017-07-31 Abdus Sattar Bhuiyan

我們可以使用jquery 每個檢查每個部門的驗證。這裏是形式組。

更正演示https://jsfiddle.net/ipsjolly/4boh061y/

HTML

  <form action="#"> 
       <div class="form-group"> 
        <div class="small"> 
         <input type="radio" name="sex" value="Male" class="required"> Male 
        </div> 
        <div class="small"> 
         <input type="radio" name="sex" value="Female" class="required"> Female 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="small"> 
         <input type="radio" name="abc" value="Male" class="required"> text1 
        </div> 
        <div class="small"> 
         <input type="radio" name="abc" value="Female" class="required"> text2 
        </div> 
       </div> 
       <input type="submit" value="Submit" class="registerBtn"> 
      </form>

JQuery的

   $(document).ready(function(){ 
       $('.registerBtn').on({ 
        click: function(evnt){ 


         $(".form-group").each(function(){ 
          if($(this).find("input:radio:checked").length){ 
           $(this).css({'background':'white'}); 
           alert($(this).find("input:radio:checked").val()); 
          }else{ 
           $(this).css({'background':'red'}); 
          } 

         }); 
         evnt.preventDefault(); 
        } 
       }); 
      });

來源

2017-07-31 09:46:02

我不知道這是否正確的，但我認爲你是對輸入型和兩節中，你有輸入型無線電檢查，所以我覺得你選擇檢查使用輸入的名稱是這樣的：

$('input[name=sex]').each(function(){ 
     if(!$(this).is(':checked')){ 
      var CLASS = $(this).parent().parent().css({'background':'red'}); 
      console.log(CLASS); 
     } 
$('input[name=abc]').each(function(){ 
     if(!$(this).is(':checked')){ 
      var CLASS = $(this).parent().parent().css({'background':'red'}); 
      console.log(CLASS);

我不知道如果這真的我沒有經驗與JS

來源

2017-07-31 09:41:58

如果你不想重複的代碼，你可以爲此做一個外部函數。 – JBO

試試這個：

$(document).ready(function() { 
 
     $('.registerBtn').on({ 
 
     click: function(evnt) { 
 

 
      $('.form-group input[type=radio]').each(function() { 
 
      if (!$(this).is(':checked')) { 
 
       var CLASS = $(this).parent().css({ 
 
       'background': 'red' 
 
       }); 
 
      } 
 
      else 
 
      { 
 
      $(this).parent().css({ 
 
       'background': 'white' 
 
       }); 
 
      } 
 
      }); 
 
      evnt.preventDefault(); 
 
      var radioInput = $(".required:checked").val(); 
 
     } 
 
     }); 
 
    });

<html> 
 

 
<head> 
 
    <title>jquery</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <form action="#"> 
 
    <div class="form-group" > 
 
     <div class="small"> 
 
     <input type="radio" name="sex" value="Male" class="required"> Male 
 
     </div> 
 

 
     <div class="small"> 
 
     <input type="radio" name="sex" value="Female" class="required"> Female 
 
     </div> 
 

 
    </div> 
 

 
    <div class="form-group"> 
 

 
     <div class="small"> 
 
     <input type="radio" name="abc" value="Male" class="required"> text1 
 
     </div> 
 

 
     <div class="small"> 
 
     <input type="radio" name="abc" value="Female" class="required"> text2 
 
     </div> 
 

 
    </div> 
 

 

 

 
    <input type="submit" value="Submit" class="registerBtn"> 
 
    </form> 
 

 

 
</body> 
 

 
</html>

來源

2017-07-31 09:48:23

這與我的輸出近似。但男性和女性是一對，如果選擇一個，那麼它應該被視爲選定的。 –

由於您使用jQuery的有沒有需要遍歷每個成員

$('input[type=radio]').each

只是執行查詢和jQuery將完成剩下的，就像這樣：

$('input[type=radio]:checked')

一切都是紅色的，因爲兩個組具有相同的名稱，他們應該有單獨的表單名稱或使用選擇器來選擇T中的第一種形式組只（不推薦）：

$('div.form-group:first input[type=radio]:checked').parent().css({'background':'red'});

您可以查看完整的解決方案here

來源

2017-07-31 09:52:17

試試這個代碼

變化$(this).parent().parent().css()到$('input:radio:checked').parent().parent().css()所以它會工作

$(document).ready(function() { 
 
    $('.registerBtn').on({ 
 
    click: function(evnt) { 
 

 
     $('input[type=radio]').each(function() { 
 
     if (!$(this).is(':checked')) { 
 
      var CLASS = $('input:radio:checked').parent().parent().css({ 
 
      'background': 'red' 
 
      }); 
 
      console.log(CLASS); 
 
     } 
 
     }); 
 
     evnt.preventDefault(); 
 
     var radioInput = $('input:radio:checked').val(); 
 
     console.log(radioInput); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="#"> 
 
    <div class="form-group"> 
 
    <div class="small"> 
 
     <input type="radio" name="sex" value="Male" class="required"> Male 
 
    </div> 
 

 
    <div class="small"> 
 
     <input type="radio" name="sex" value="Female" class="required"> Female 
 
    </div> 
 

 
    </div> 
 

 
    <div class="form-group"> 
 

 
    <div class="small"> 
 
     <input type="radio" name="abc" value="text1" class="required"> text1 
 
    </div> 
 

 
    <div class="small"> 
 
     <input type="radio" name="abc" value="text2" class="required"> text2 
 
    </div> 
 

 
    </div> 
 

 

 

 
    <input type="submit" value="Submit" class="registerBtn"> 
 
</form>

來源

2017-07-31 09:53:00 Bhargav

如何通過多個無線電輸入檢測是否選擇了無線電輸入？

回答

相關問題