单选按钮上的Onchange事件不起作用
Onchange event on a radio button doesn't work
我有一组单选按钮:
{% for user in users %}
<form name="form_user_{{ user.id }}" method="post" action="/networks/{{ net.id }}/sensors/{{ sens.id }}/rights">
<tr>
<td>
<div>
{{ escape(user.name) }}
<input type='hidden' name="id" value='{{ user.id }}'>
</div>
</td>
<td>
<label class="radio inline" onchange="document.forms['form_user_{{ user.id }}'].submit();">
<input type="radio" name="perms" id="perms_{{user.id}}_0" value="0">
None
</label>
<label class="radio inline" onchange="document.forms['form_user_{{ user.id }}'].submit();">
<input type="radio" name="perms" id="perms_{{user.id}}_1" value="1">
Read
</label>
<label class="radio inline" onchange="document.forms['form_user_{{ user.id }}'].submit();">
<input type="radio" name="perms" id="perms_{{user.id}}_4" value="4">
Read + Commands
</label>
{{ xsrf_form_html() }}
</td>
</tr>
</form>
{% end %}
我有一个js函数,改变单选按钮上的检查,当单选按钮检查改变,我将表单提交工作。如果我点击单选按钮,一切正常。但如果我使用js函数改变检查,这不起作用。为什么?
谢谢。
编辑
这是我的js函数:<script>
function checkall(perm){
var permall = parseInt(perm);
switch (permall){
case 0:
{% for user in users %}
document.getElementById("perms_{{user.id}}_0").checked=true
{% end %}
break;
case 1:
{% for user in users %}
document.getElementById("perms_{{user.id}}_1").checked=true
{% end %}
break;
case 4:
{% for user in users %}
document.getElementById("perms_{{user.id}}_4").checked=true
{% end %}
break;
}
}
</script>
可能是因为JS没有触发onchange
事件。你必须自己触发它。
说明手动触发事件在这里:StackOverflow主题
(好主意)经过思考,我认为最好的方法是在Ajax方法中调用表单操作url。
使用jQuery,它可以是这样的:
var changeRadio = function(callback, checkedData) {
$.ajax({
type : 'POST',
url : callback,
data : checkedData,
success : function() {
//if you wan't, you can do something
}
});
};
在你的switch
中:EDIT(在第二个参数中用冒号替换逗号)
{% for user in users %}
document.getElementById("perms_{{user.id}}_0").checked=true;
changeRadio(document.forms['form_user_{{ user.id }}'].action, {document.getElementById("perms_{{user.id}}_0").name:document.getElementById("perms_{{user.id}}_0").value});
{% end %}
break;
所有jQuery方法:
var changeRadio = function(callback, inputElement) {
var element = inputElement; //By creating a global var, you're able to access it into success function
$.ajax({
type : 'POST',
url : callback,
data : {$(element).attr('name'):$(element).val()},
success : function() {
$(element).attr('checked', true);
}
});
};
function checkall(perm){
var permall = parseInt(perm);
$('input:checkbox[value="'+permall+'"]').each(function() {
changeRadio($(this).parent('form').attr('action'), $(this));
});
}
去年编辑JS
var changeRadio = function(callback, inputElement, form) {
var element = inputElement; //By creating a global var, you're able to access it into success function
console.log(form);
$.ajax({
type : 'POST',
url : callback,
data : $(form).serialize(),
success : function() {
$(element).attr('checked', true);
}
});
};
var checkall = function (perm){
var permall = parseInt(perm);
$('input:radio[value="'+permall+'"]').each(function() {
changeRadio($('#form_user_'+$(this).attr('user_id')).attr('action'), $(this),$('#form_user_'+$(this).attr('user_id')));
});
}
$(document).ready(function() {
$('.checkallCaller').on('click', function() {
checkall($(this).attr('rel'));
});
});
并在HTML中,为每个checkall radio的标签添加checkallCaller类,并为用户radio添加user_id
属性。(这不是w3c,但它的工作)
相关文章:
- JsFiddle上的鼠标事件不起作用
- 链接上的IE10 jquery句柄单击事件不起作用
- jQuery加载完成事件不起作用
- 覆盖单击事件不起作用
- 单击事件不起作用
- 为什么body元素上的onclick事件不起作用
- 追加Jquery后的Binding Click事件不起作用
- chrome中的onmouseover(下拉选项标记)事件不起作用-php,javascript
- jQuery调用keyup事件不起作用
- 选择选项淘汰赛事件不起作用
- pixijs 鼠标关闭事件不起作用(任何版本)
- D3.js鼠标事件不起作用
- D3js 饼图单击事件不起作用
- j查询动画重置后事件不起作用
- jquery 1.7追加后点击事件不起作用
- 当我将位置更改为绝对时,画布精灵表和触摸事件不起作用
- 引导程序弹出窗口(bootbox)中的Javascript事件不起作用
- 在Javascript中动态添加列时,单击事件不起作用
- 敲除数据绑定=“;html:html,内部html点击事件不起作用
- 当元素在事件绑定后附加到DOM时,触摸事件不起作用