當單選按鈕被選中時，複選框變爲必需

我試圖編寫jQuery代碼來驗證是否檢查某個單選按鈕。如果選中該單選按鈕，則會出現4個複選框，並且必須至少檢查其中一個複選框。如果不是，瀏覽器將顯示警報，而在另一種情況下，將發送表單。當單選按鈕被選中時，複選框變爲必需

問題是，即使我選擇了一個複選框，我得到瀏覽器警報，我沒有選中任何複選框，並且表單不會提交。 Thx提前。

HTML：

<form method='POST' action='#'> 
     <input type='radio' id='D_odg' name='c' value=''> 

     <div id='D_div'> 

      <input type='checkbox' value='1' name='c3' id='inputD1'><label>Label1</label> 
      <input type='checkbox' value='2' name='c3' id='inputD2'><label>Label2</label> 
      <input type='checkbox' value='3' name='c3' id='inputD3'><label>Label3</label> 
      <input type='checkbox' value='4' name='c3' id='inputD4'><label>Label4</label> 

     </div> 

     <input type='submit' value='Send' id='button'> 

</form>

的jQuery：

$('#button').click(function() { 
    var checkedboxes = $('.D_div :checkbox:checked').length; 
    if ($('#D_odg').prop('checked') && checkedboxes===0{ 
      alert('At least 1 checkbox must be selected'); 
      return false;    
    }else{ 
      alert('Form submited!'); 
    }   
});

來源

2015-09-04 MadMaxa

'.'爲類，而'＃'爲id。您的選擇器不同 – guradio

與您的代碼幾個問題。

1）你有不正確的選擇器來定位複選框的父div。 D_div是div的標識，而不是class。因此，你需要使用id選擇#代替類選擇.的：

var checkedboxes = $('#D_div :checkbox:checked').length; 
        //^^ ID selector here

2）你有語法錯誤。你還沒有使用結束括號因爲如果條件

if ($('#D_odg').prop('checked') && checkedboxes===0) 
               // ^^ missing brace

Working Demo

來源

2015-09-04 11:19:58

它的工作原理，非常感謝：D – MadMaxa

@Prism：很高興它有幫助:) –

試試這個：你已經使用類選擇，而不是id選擇了D_div。你也可以改變$('#D_odg').prop('checked')到$('#D_odg').is(':checked')看起來更具可讀性，請參閱=== 0後，下面的代碼

$('#button').click(function() { 

     var checkedboxes = $('#D_div :checkbox:checked').length; 

     if ($('#D_odg').is(':checked') && checkedboxes===0){ 
      alert('At least 1 checkbox must be selected'); 
      return false; 

     }else{ 

      alert('Form submited!'); 

     }   

    });

來源

2015-09-04 11:20:27

道具返回值及其類型。 'prop（'checked'）'和'is（'：checked'）'將返回相同的值。 –

@MilindAnantwar哦，好吧..我不知道。感謝您的糾正 –

你缺少右括號。此外：複選框：選中返回0.此作品：

$('#button').click(function() { 
    var checkedboxes = $('[name="c3"]:checked').length; 
    if ($('#D_odg').prop('checked') && checkedboxes===0){ 
     alert('At least 1 checkbox must be selected'); 
     return false; 
    }else{ 
     alert('Form submited!'); 
    }   
});

來源

2015-09-04 11:27:55 ukdesignservices

當單選按鈕被選中時，複選框變爲必需

回答

相關問題