如果选中没有值的复选框并提交，则发出警报

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;
        }

    });

});