2015-12-31 52 views
1

JavaScript函數不會取消選中該複選框

$('#checkboxF1').on('change', function() { 
 
    alert("test"); 
 
}); 
 

 
function check_box() { 
 
    document.getElementById("checkboxF1").checked = true; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="check_box" onclick="check_box();">check box</button> 
 
<br> 
 
<br> 
 
<input type="checkbox" id="checkboxF1" class="css-checkbox">Test

直接勾選複選框,當檢查,但通過函數的複選框,當它不工作,即命名的函數的函數電平變化工作的工作check_box()

我要調用的函數電平變化時,選中該複選框是通過功能check_box()檢查。

+0

啊。它也工作,當我直接點擊複選框。但是當我通過點擊按鈕改變選中的狀態時它不起作用。 – Neethu

回答

0

問題是改變複選框狀態不會觸發事件。 改爲嘗試觸發器。

var chk = $('#checkboxF1'); 
 

 
chk.on('change', function() { 
 
    alert("test"); 
 
}); 
 

 
function check_box() { 
 
    chk.trigger('click'); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<button id="check_box" onclick="check_box();">check box</button> 
 
<br> 
 
<br> 
 
<input type="checkbox" id="checkboxF1" class="css-checkbox">Test

-1

由於您使用jQuery,試試這個:

function check_box(){ 
    $("#checkboxF1").prop('checked', true); 
} 

編輯:我把你的函數中的一個片段,並能正常工作了。它檢查框。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<html> 
 
    <head> 
 
     <title>Test</title> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
    </head> 
 
    <body> 
 

 
    <button id="check_box" onclick="check_box();"> check box </button> 
 
    <br> <br> 
 
    <input type="checkbox" id="checkboxF1" class="css-checkbox"> Test 
 

 
    <script> 
 
    $('#checkboxF1').on('change', function() { 
 
    alert("test"); 
 
}); 
 

 
    function check_box(){ 
 
     document.getElementById("checkboxF1").checked = true; 
 
    } 
 

 
    </script> 
 

 
    </body> 
 
    </html>

如果你想切換與按鈕的複選框。然後這樣做:

function check_box(){ 
    $("#checkboxF1").prop('checked', !$("#checkboxF1").prop('checked')); 
} 

如果這不是,那麼我不明白這個問題。

編輯2:好了,如果onchange事件不火;試圖強制它。

$('#checkboxF1').trigger('change'); 
+0

是的。它也工作,當我直接點擊複選框。但是當我通過點擊按鈕改變選中的狀態時它不起作用。 – Neethu

+0

他的問題不是沒有檢查框。它的'onchange'處理程序不會觸發。 –

+0

感謝您的翻譯。做了另一個編輯,雖然我對此沒有信心。 –

3

這對於input標籤是正常的。以編程方式更改該值時,更改事件不會觸發。這就是他們的設計。

常用處理辦法是直接調用該函數的變化或當你編程方式更改值手動觸發更改事件。

0

試試這個 -

//創建一個新的 '變革' 事件

VAR的事件=新的事件( '變');

//派遣它

element.dispatchEvent(事件);

讓我知道,如果這有助於...

0

見下面的代碼。

$('#checkboxF1').on('change', function() { 
 
    alert("test"); 
 
}); 
 

 
function check_box() { 
 
    // emulate the checkbox. 
 
    var checkboxF1 = document.getElementById("checkboxF1"); 
 
    checkboxF1.checked = !checkboxF1.checked; 
 
    // trigger the onChange event. 
 
    $('#checkboxF1').trigger('change'); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="check_box" onclick="check_box();">check box</button> 
 
<br> 
 
<br> 
 
<input type="checkbox" id="checkboxF1" class="css-checkbox">Test