在更改单选按钮状态时显示提交按钮.如何

On change radio button state show submit button... how?

本文关键字:显示 提交 按钮 如何 状态 单选按钮      更新时间:2023-09-26

我想仅在单选按钮值更改时才显示提交按钮。我将有几个单选按钮组,如果任何单选按钮发生变化,该按钮应该会出现!此外,如果单选按钮组值达到默认值,提交按钮将再次隐藏。

$("form :radio").live('change',function(){
});

我的新代码:

//hide the submit button on load
        $('form :submit').hide();
        //Data structure where the initial value from radio button(s) will be stored
        var dbRadios = [];
        //Getting the initial values from the radio button(s) and load them to the data structure
        $("form :radio:checked").each(function() {
            dbRadios.push($(this).attr('value'));
        });

        //Attach onclick event to radio button(s)
        $('form :radio').click(function() {
            //The event fired, therefore the "New value(s)" (radio button value(s))  will be stored in the data sctructure
            var submitedRadios = [];
            //Geting the values from checked radio buttons
            $("form :radio:checked").each(function() {
                submitedRadios.push($(this).attr('value'));
            });
            //Now comparing both data structures
            if(dbRadios.compare(submitedRadios)){
                $('form :submit').fadeOut('slow');
            }else{
                $('form :submit').fadeIn('slow', function(){ ACTION! WILL BE EXECUTED MANY TIMES AS BUTTONS CLICKED});
            }
        });

        $("form").submit(function () {
        //AJAX GOES HERE!   
        alert("a submeter dados");  
        })

比较功能:

//Compare two different arrays
    Array.prototype.compare = function(testArr) {
        if (this.length != testArr.length) return false;
        for (var i = 0; i < testArr.length; i++) {
        if (this[i].compare) { 
            if (!this[i].compare(testArr[i])) return false;
        }
        if (this[i] !== testArr[i]) return false;
        }
        return true;
    }

您可以尝试如下操作。您可以编写更具体的逻辑来满足您的要求。

$(document).ready(function () {
   //hide the submit button on load
   $('form :submit').hide();
   var defaultVal = 'default';
   //attach onchange event to radio buttons
   $('form :radio').change(function() {
       var val = $(this).val();
       if(val!=defaultVal) {
         $('form :submit').show();
       } else {
         $('form :submit').hide();
       }
   });
});

上面的代码将根据单击/更改的单选按钮的当前值显示/隐藏提交按钮。

您可以尝试将onclick与onclick中的逻辑绑定,看看它是否不同

效果很好!

//Attach onclick event to radio button(s)
        $('form :radio').click(function() {
            //Every new event clears the array so the new values can be stored properly
            submitedRadios = [];
            //Geting the values from checked radio buttons every time the state modifies
            $("form :radio:checked").each(function() {
                submitedRadios.push($(this).attr('value'));
            });
            //Now comparing both data structures, if equal submit button hides, else shows
            if(dbRadios.compare(submitedRadios)){
                $('form :submit').fadeOut('slow');
            }else{
                $('form :submit').fadeIn('slow');
            }
        });