提醒如果複選框沒有被選中並提交

Question

我想這樣做，當我點擊提交按鈕時，它應該會提醒我，如果在我的文本框中沒有選中複選框。並且在更正之後，當我點擊提交時，我應該得到被檢查的文本框的值。

<center> 
    Would you like to proceed for checking? 
    <input type="radio" id="radio1" name="radio" value='Yes' /> 
    <label for="radio1">Yes</label> 
    <input type="radio" id="radio2" name="radio" value='No'/> 
    <label for="radio2">No</label> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
    <br><br> 
    <div class="result1"></div> 
    <div class="result2"></div> 
    <div class="result3"></div> 
    <div class="result4"></div> 
    <script> 
     $(function() { 
      $("input[name='radio']").on("change", function() { 
       if ($("input[name='radio']:checked").val() == "Yes") { 
        document.querySelector('.result1').innerHTML = 'Enter your requirements:'; 
        $('.result1').html('Enter your requirements:').fadeIn('fast'); 
        document.querySelector('.result2').innerHTML = '<input type="checkbox" name="dn" >DN length:<input type="text" name="dnlength" />'; 
        $('.result2').html('<input type="checkbox" name="dn"> DN length: <input type="text" name="dnlength" />').fadeIn('fast'); 
        document.querySelector('.result3').innerHTML = '<input type="checkbox" name="dn"> valid digits:<input type="text" name="valid" />'; 
        $('.result3').html('<input type="checkbox" name="dn"> valid digits: <input type="text" name="valid" />').fadeIn('fast'); 
        document.querySelector('.result4').innerHTML = '<button type="submit" value="Submit" onclick="checkboccheck()">Submit</button>'; 
        $('.result4').html('<button type="submit" value="Submit">Submit</button>').fadeIn('fast'); 
       } 
       if ($("input[name='radio']:checked").val() == "No") { 
        $('.result1').fadeOut('fast'); 
        $('.result2').fadeOut('fast'); 
        $('.result3').fadeOut('fast'); 
        $('.result4').fadeOut('fast'); 
       } 
      }); 
     }); 
    </script> 
</center> 

Answer 1

檢查這個fiddle，希望這是你在找什麼，

<form id="myform"> 
<center>Would you like to proceed for checking? 
<input type="radio" id="radio1" name="radio" value='Yes' /><label for="radio1">Yes</label> 
<input type="radio" id="radio2" name="radio" value='No'/><label for="radio2">No</label>  
<br><br> 
<div class="result1"></div> 
<div class="result2"></div> 
<div class="result3"></div> 
<div class="result4"></div>  
</center> 
    </form> 


$.fn.serializeObject = function() 
{ 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name] !== undefined) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      } 
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 
    return o; 
}; 

$(function() { 
    $("input[name='radio']").on("change", function() { 

     if($("input[name='radio']:checked").val() == "Yes"){ 

       document.querySelector('.result1').innerHTML = 'Enter your requirements:'; 
       $('.result1').html('Enter your requirements:').fadeIn('fast'); 

       document.querySelector('.result2').innerHTML = '<input type="checkbox" name="dn" >DN length:<input type="text" name="dnlength" />'; 
       $('.result2').html('<input type="checkbox" name="dn"> DN length: <input type="text" name="dnlength" />').fadeIn('fast'); 


       document.querySelector('.result3').innerHTML = '<input type="checkbox" name="dn"> valid digits:<input type="text" name="valid" />'; 
       $('.result3').html('<input type="checkbox" name="vd"> valid digits: <input type="text" name="valid" />').fadeIn('fast'); 

       document.querySelector('.result4').innerHTML = '<button type="submit" value="Submit" onclick="checkboccheck()">Submit</button>'; 
       $('.result4').html('<button type="submit" value="Submit">Submit</button>').fadeIn('fast'); 

      } 
      if($("input[name='radio']:checked").val() == "No"){ 
      $('.result1').fadeOut('fast').html(''); 
      $('.result2').fadeOut('fast').html(''); 
      $('.result3').fadeOut('fast').html(''); 
      $('.result4').fadeOut('fast').html(''); 
      } 


    }); 

    $('#myform').submit(function(){ 
     var formdata = $(this).serializeObject(); 
     console.log(formdata); 
     if(formdata.radio =='Yes'){ 
      if(formdata.dn == 'on'){ 
       if(!formdata.dnlength){ 
       alert('Please enter dn length.'); 
       return false; 
       } 
      } 
      if(formdata.vd == 'on'){ 
       if(!formdata.valid){ 
       alert('Please enter valid digints'); 
       return false; 
       } 
      } 
      if(!formdata.dn && !formdata.vd){ 
       alert('Please choose atleast one requirements!'); 
       return false; 
      } 
     }else{ 
      alert('You cannot submit the form!'); 
      return false; 
     } 

    }); 

});