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

[最好的主意]

思前想後，我認爲最好的方法是調用表單的動作URL在Ajax方法。

使用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的

所有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，但它的工作）