復選框更改狀態

Question

我正在努力解決以下問題：

如果復選框的狀態更改，我只想將一個值寫入字段。

我有以下內容，但我不知道如何100％正確地使用它：

     <script type="text/javascript">
        document.getElementById('control_COLUMN3').onchange = 
        function() {
            if(document.getElementById('control_COLUMN3').checked) 
            {
                 console.log('checked');
                 document.getElementById('control_COLUMN15').value = 
                 "checked";
            } 
            else 
            {
                 console.log('unchecked');
                 document.getElementById('control_COLUMN15').value = 
                 "empty";   
            }
        };
        </script>

我的HTML看起來像這樣：

<tr>
                <td style="padding: 5px 0px 0px 5px;">
                    <div style="position: relative; overflow: hidden; width:300px;" id="container_COLUMN3">
                        <div style="margin: 0px 0px 0px 3px;">
                            <table cellspacing="0" cellpadding="0" border="0">
                                <tr style="height: 20px">
                                    <td class="fieldLabel" style="">
                                        <label class="yesNoCheckboxLabel">
                                            <input type="checkbox"  name="City" id="control_COLUMN3" label="City">
                                            City</label>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td>
                    <input type="hidden" name="Language" id="control_COLUMN15">
                </td>
            </tr>

有人可以幫我嗎？

謝謝！ 洛倫

Answer 1

您應該能夠使用onchange函數並.checked來更改第二個復選框的值：

 document.querySelector('#control_COLUMN3').onchange = function() { if(document.getElementById('control_COLUMN3').checked) { console.log('checked'); document.getElementById('control_COLUMN15').checked = "checked"; } else { console.log('unchecked'); document.getElementById('control_COLUMN15').checked = ""; }; } 

 <input id="control_COLUMN3" type="checkbox"> <input id="control_COLUMN15" type="checkbox"> 

更新了以下評論：

 function checkCheckbox() { if(document.getElementById('control_COLUMN3').checked) { console.log('checked'); document.getElementById('control_COLUMN15').value = "checked"; } else { console.log('unchecked'); document.getElementById('control_COLUMN15').value = "empty"; }; } 

 <input id="control_COLUMN3" type="checkbox" onChange="checkCheckbox()"> <input type="hidden" name="Language" id="control_COLUMN15"> 

Answer 2

使用.show()查看輸入

 function changeCheckbox(){ if ($('#control_COLUMN3').is(':checked')) { $('#control_COLUMN15').show(); $('#control_COLUMN15').val("checked"); } else $('#control_COLUMN15').val("unchecked"); $('#control_COLUMN15').show(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="control_COLUMN3" type="checkbox" onchange="changeCheckbox()"> <input style="display:none" name="Language" id="control_COLUMN15"> 

僅供您編輯javascript

  function changeCheckbox(){ if (document.getElementById('control_COLUMN3').checked) { document.getElementById('control_COLUMN15').value="checked"; document.getElementById('control_COLUMN15').style.display="block"; } else document.getElementById('control_COLUMN15').value="unchecked"; document.getElementById('control_COLUMN15').style.display="block"; } 

  <input id="control_COLUMN3" type="checkbox" onchange="changeCheckbox()"> <input style="display:none" name="Language" id="control_COLUMN15">