在更改单选按钮状态时显示提交按钮.如何
On change radio button state show submit button... how?
我想仅在单选按钮值更改时才显示提交按钮。我将有几个单选按钮组,如果任何单选按钮发生变化,该按钮应该会出现!此外,如果单选按钮组值达到默认值,提交按钮将再次隐藏。
$("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');
}
});
相关文章:
- 在我的网站上显示最近提交的文章/图片
- HTML5在提交并显示所需标签后显示隐藏的表单元素
- 如何在单击“提交”按钮时为“新建”窗口编写JavaScript,用“确定”和“取消”显示注册信息
- 提交表单时,显示或识别隐藏的必填字段并将其集中
- 表单提交没有'如果为空,则不会显示错误消息
- 如何在同一页面上显示用户提交的数据
- 如何在将鼠标悬停在提交/锚点上时检查复选框是否已选中,并显示提示用户这样做的警报
- 显示带有表单提交的单击事件的 toastR
- 提交后如何递增和显示表单数量
- 在表行鼠标悬停时显示提交按钮
- 在 AngularJS 中显示提交时验证错误消息
- React JS显示提交后的数据
- 仅当选择选项时,才在多个表单上显示提交按钮
- 点击文本区域时显示提交按钮
- 我如何隐藏和显示提交按钮时,一个是按钮被点击
- 在文本区域字段中键入时显示提交按钮
- Rails:Foundation5显示提交模式按钮
- 在更改单选按钮状态时显示提交按钮.如何
- 显示提交<链接onchange并传递已更改的输入框的值
- Rails在同一页面显示提交后的信息