Javascript 复选框 onChange

Posted 2023-03-05

【中文标题】Javascript 复选框 onChange

【英文标题】：Javascript checkbox onChange

【发布时间】：2011-09-15 13:34:00

【问题描述】：

我在表单中有一个复选框，我希望它根据以下情况工作：

如果有人检查它，文本字段 (totalCost) 的值应设置为 10。 那么，如果我返回并取消选中它，函数calculate()会根据表单中的其他参数设置totalCost的值。

所以基本上，我需要这样的部分，当我选中复选框时，我会做一件事，当我取消选中它时，我会做另一件事。

【问题讨论】：

Checkboxid.Checked==true/false写你的活动。

【参考方案1】：

function calc()

  if (document.getElementById('xxx').checked) 
  
      document.getElementById('totalCost').value = 10;
   else 
      calculate();
  

html

<input type="checkbox" id="xxx" name="xxx" onclick="calc();"/>

【讨论】：

如果用户使用键盘呢？

Here's a JsFiddle 可以测试所有不同的方式：单击、键盘、标签和访问键。它们都在 Firefox 中触发事件。

很遗憾，通过 javascript 更改复选框状态时没有触发该事件。

大声笑，从 javascript 使用这个 $('#checkbox').attr('checked','checked'); $('#checkbox').click();

您应该改用 onchange，它是专门为 OP 的用例设计的。 （感谢下面的 ReeCube 提供链接）developer.mozilla.org/en-US/docs/Web/Events/change

【参考方案2】：

纯javascript：

const checkbox = document.getElementById('myCheckbox')

checkbox.addEventListener('change', (event) => 
  if (event.currentTarget.checked) 
    alert('checked');
   else 
    alert('not checked');
  
)

My Checkbox: <input id="myCheckbox" type="checkbox" />

【讨论】：

NICE ??? 作品

这应该是接受的响应

【参考方案3】：

如果您使用的是 jQuery.. 那么我可以提出以下建议： 注意：我在这里做了一些假设

$('#my_checkbox').click(function()
    if($(this).is(':checked'))
        $('input[name="totalCost"]').val(10);
     else 
        calculate();
    
);

【参考方案4】：

使用 onclick 事件，因为每次点击复选框都会改变它。

【讨论】：

如果用户使用键盘怎么办？

是stage，但还是click

确实点击有效，当您使用标签切换复选框时甚至会触发它。但是你最好使用'change'事件！ 'change' 事件用于此：developer.mozilla.org/en-US/docs/Web/Events/change

双击呢？

嗯，现在点击两次不是吗？

【参考方案5】：

以下解决方案使用 jquery。假设您有一个 id 为 checkboxId 的复选框。

const checkbox = $("#checkboxId");

checkbox.change(function(event) 
    var checkbox = event.target;
    if (checkbox.checked) 
        //Checkbox has been checked
     else 
        //Checkbox has been unchecked
    
);

【参考方案6】：

HTML：

<input type="checkbox" onchange="handleChange(event)">

JS：

function handleChange(e) 
     const checked = e.target;

【参考方案7】：

通过它的 id 引用复选框，而不是 # 将函数分配给 onclick 属性，而不是使用 change 属性

var checkbox = $("save_" + fieldName);
checkbox.onclick = function(event) 
    var checkbox = event.target;

    if (checkbox.checked) 
        //Checkbox has been checked
     else 
        //Checkbox has been unchecked
    
;

【参考方案8】：

我知道这似乎是菜鸟的答案，但我把它放在这里是为了将来可以帮助其他人。

假设您正在构建一个带有 foreach 循环的表。同时在最后添加复选框。

<!-- Begin Loop-->
<tr>
 <td><?=$criteria?></td>
 <td><?=$indicator?></td>
 <td><?=$target?></td>
 <td>
   <div class="form-check">
    <input type="checkbox" class="form-check-input" name="active" value="<?=$id?>" <?=$status?'checked':''?>> 
<!-- mark as 'checked' if checkbox was selected on a previous save -->
   </div>
 </td>
</tr>
<!-- End of Loop -->

您在表格下方放置一个隐藏输入的按钮：

<form method="post" action="/goalobj-review" id="goalobj">

 <!-- we retrieve saved checkboxes & concatenate them into a string separated by commas.i.e. $saved_data = "1,2,3"; -->

 <input type="hidden" name="result" id="selected" value="<?= $saved_data ?>>
 <button type="submit" class="btn btn-info" form="goalobj">Submit Changes</button>
</form>

你可以这样写你的脚本：

<script type="text/javascript">
    var checkboxes = document.getElementsByClassName('form-check-input');
    var i;
    var tid = setInterval(function () 
        if (document.readyState !== "complete") 
            return;
        
        clearInterval(tid);
    for(i=0;i<checkboxes.length;i++)
        checkboxes[i].addEventListener('click',checkBoxValue);
    
    ,100);

    function checkBoxValue(event) 
        var selected = document.querySelector("input[id=selected]");
        var result = 0;
        if(this.checked) 

            if(selected.value.length > 0) 
                result = selected.value + "," + this.value;
                document.querySelector("input[id=selected]").value = result;
             else 
                result = this.value;
                document.querySelector("input[id=selected]").value = result;
            
        
        if(! this.checked)  

// trigger if unchecked. if checkbox is marked as 'checked' from a previous saved is deselected, this will also remove its corresponding value from our hidden input.

            var compact = selected.value.split(","); // split string into array
            var index = compact.indexOf(this.value); // return index of our selected checkbox
            compact.splice(index,1); // removes 1 item at specified index
            var newValue = compact.join(",") // returns a new string
            document.querySelector("input[id=selected]").value = newValue;
        

    
</script>

您的复选框的 ID 将在结果变量中作为字符串“1,2”提交。然后，您可以根据需要在控制器级别对其进行分解。

【参考方案9】：

Javascript

  // on toggle method
  // to check status of checkbox
  function onToggle() 
    // check if checkbox is checked
    if (document.querySelector('#my-checkbox').checked) 
      // if checked
      console.log('checked');
     else 
      // if unchecked
      console.log('unchecked');
    
  

HTML

<input id="my-checkbox" type="checkbox" onclick="onToggle()">

【参考方案10】：

试试

totalCost.value = checkbox.checked ? 10 : calculate();

function change(checkbox) 
  totalCost.value = checkbox.checked ? 10 : calculate();


function calculate() 
  return other.value*2;

input  display: block

Checkbox: <input type="checkbox" onclick="change(this)"/>
Total cost: <input id="totalCost" type="number" value=5 />
Other: <input id="other" type="number" value=7 />