单击多个输入，然后单击用于验证 jQuery 的显示按钮

Question

我这里有三个部分，当所有三个部分都被单击时，如何使下一个按钮显示？如果未单击其中一个，则可以看到带有"hideme"类的按钮，如果单击所有这些按钮，则隐藏"hideme"并显示"third_step"按钮。

<input type="date" name="purchase_date">
<input type="radio" name="group" value="one">
<input type="radio" name="group" value="two">
<input type="radio" name="group" value="three">
<input type="radio" name="choice" value="yes">
<input type="radio" name="choice" value="no">
<a class="next hideme">Next</a><a class="next third_step">Next</a>

有人请帮忙，我不知道从哪里开始。

Answer 1

在这里我在 <form> 上添加一个 id。并给输入一些类.

使用更改事件 |显示(( |隐藏((

试试这个

<form id="myForm">
    <input type="date" name="purchase_date" class="date">
    <input type="radio" name="group" value="one" classs="group">
    <input type="radio" name="group" value="two" classs="group">
    <input type="radio" name="group" value="three" classs="group">
    <input type="radio" name="choice" value="yes" classs="choice">
    <input type="radio" name="choice" value="no" classs="choice">
    <a class="next" style="display:none">Next</a>
</form>
<script>
    $(document).ready(function(){
        $('.group').on('change',function(){
            $('.date').change();
        });
        $('.choice').on('change',function(){
            $('.date').change();
        });
        $('.date').on('change',function(){
            var date = $('.date').val();
            var group = ($('input:radio[name=group]:checked').val() || 0);
            var choice = ($('input:radio[name=choice]:checked').val() || 0);
            if(date != '' && group != '' && group != 0 && choice != '' && choice != 0)
                $('.next').show();
            else
                $('.next').hide();
        });
    });
</script>

Answer 2

$(document).on("click, change","input[name=group],
                                input[name=choice],
                                input[name=purchase_date] ",
  function(){
     var groupSelected = $("input[name=group]:checked").val();
     var choiceSelected = $("input[name=choice]:checked").val();
     var dateSelected = $("input[name=purchase_date]").val();
     if(groupSelected === undefined || 
        choiceSelected === undefined || 
        dateSelected === undefined || 
        dateSelected === "")
     {
        $(".next").toggleClass("hideme",true);
     }
     else{
        $(".next").toggleClass("hideme",false);
     }      
});