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">

仅适用于编辑

   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">

复选框更改状态

2 个答案: