javascript - 单选按钮上的 Onchange 事件不起作用

Question

我有这组单选按钮:

{% 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>

Answer 1

可能是因为 JS 没有触发 onchange 事件。你必须自己触发它。

此处手动触发事件的说明:StackOverflow topic

[最佳想法]

经过思考，我认为最好的方法是在 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
        }
    });

};

在您的开关中:编辑(将第二个参数中的逗号替换为冒号)

    {% 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

所有 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 中，为检查所有广播的每个标签添加 'checkallCaller' 类，并为用户广播添加 user_id 属性。 (这不是 w3c，但它可以工作)