![](/img/trans.png)
[英]Uncheck a checkbox by checking a radio button, using pure javascript
[英]How to display the table by checking the checkbox using pure JavaScript?
當復選框被選中但它不起作用時,我需要顯示一個表格。 您可以在下面找到我的腳本、復選框和表格
<script>
function checked() {
var checkBox = document.getElementById("check");
var concession = document.getElementById("hidden");
if (checkBox.checked == true){
concession.style.display = "block";
} else {
concession.style.display = "none";
}
}
</script>
<input type = "checkbox" name = "discount" id = "check" onclick = "checked()">
<table id = "hidden" class = "center" style = "display:none">
<tr>
<th>102-2 Taxable income is reduced by 400AZN</th>
<th></th>
<th><input type = "radio" name = "400"></th>
</tr>
<tr>
<th>102-3 Taxable income is reduced by 200AZN</th>
<th></th>
<th><input type = "radio" name = "200"></th>
</tr>
<tr>
<th>102-4 Taxable income is reduced by 100AZN</th>
<th></th>
<th><input type = "radio" name = "100"></th>
</tr>
<tr>
<th>102-5 Taxable income is reduced by 50AZN</th>
<th></th>
<th><input type = "radio" name = 50"></th>
</tr>
</table>
我該如何解決這個問題?
當您使用像onclick
這樣的內聯處理程序時,您需要分配一個函數,所以onclick="checked"
是正確的方法
作為旁注,應該首選通過addEventListener()
分配事件
<input type="checkbox" name="discount" id="check">
<table id="hidden" class="center" style="display:none">
...
</table>
<script>
var concession = document.getElementById("hidden");
document.getElementById("check").addEventListener('click', function() {
concession.style.display = (this.checked)? "block" : "none";
});
</script>
最后,值得注意的是,JS 根本不是必需的,因為您只能將 CSS 用於具有給定標記的此類任務
#check + table { display: none }
#check:checked + table { display: block }
也許checked()
被限制了,改變你的函數名:
function changed() { var checked = document.getElementById("check").checked; var concession = document.getElementById("hidden"); if (checked) { concession.style.display = "block"; } else { concession.style.display = "none"; } }
<input type="checkbox" name="discount" id="check" onChange="changed()"> <table id="hidden" class="center" style="display:none"> <tr> <th>102-2 Taxable income is reduced by 400AZN</th> <th></th> <th><input type="radio" name="400"></th> </tr> <tr> <th>102-3 Taxable income is reduced by 200AZN</th> <th></th> <th><input type="radio" name="200"></th> </tr> <tr> <th>102-4 Taxable income is reduced by 100AZN</th> <th></th> <th><input type="radio" name="100"></th> </tr> <tr> <th>102-5 Taxable income is reduced by 50AZN</th> <th></th> <th> <input type="radio" name="50"></th> </tr> </table>
您遇到此問題,因為checked
是保留名稱。 嘗試將函數名稱重命名為OnCheckboxClicked
其他名稱以解決此問題。
演示:
function OnCheckboxClicked() { var checkBox = document.getElementById("check"); var concession = document.getElementById("hidden"); if (checkBox.checked == true) { concession.style.display = "block"; } else { concession.style.display = "none"; } }
<input type="checkbox" name="discount" id="check" onclick="OnCheckboxClicked()"> <table id="hidden" class="center" style="display:none"> <tr> <th>102-2 Taxable income is reduced by 400AZN</th> <th></th> <th><input type="radio" name="400"></th> </tr> <tr> <th>102-3 Taxable income is reduced by 200AZN</th> <th></th> <th><input type="radio" name="200"></th> </tr> <tr> <th>102-4 Taxable income is reduced by 100AZN</th> <th></th> <th><input type="radio" name="100"></th> </tr> <tr> <th>102-5 Taxable income is reduced by 50AZN</th> <th></th> <th> <input type="radio" name=5 0 "></th> </tr> </table>
您必須向復選框添加一個事件偵聽器:
var checkbox = document.querySelector("#check");
checkbox.addEventListener( 'change', function() {
var concession = document.getElementById("hidden");
if(this.checked) {
concession.style.display='block';
} else {
concession.style.display='none';
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.