今天在做一个不需要from表单提交数据的复选框的小功能时,需要在复选框选中或取消选中的同时对一些后台的数据进行修改。就想到了使用js代码来监控复选框的状态,并向后台发送时时数据。关于js代码如何监控 checkbox 复选框的状态,可以参考下面的示例。
checkbox 复选框选中与未选中触发事件的方法
jq代码__点击checkbox,触发事件
<input type="checkbox" name="" id="isbox"> 我是复选框 <script> $("#isbox").click(function() { if ($(this).is(":checked")== true) { console.log('我被选中了!'); } else { console.log('我没有被选中!'); } }); //这个代码和上面的一样的,选择一个使用即可! $('input[type="checkbox"]').click(function() { if ($(this).is(":checked")== true) { console.log('我被选中了!'); } else { console.log('我没有被选中!'); } }); </script>原生JS代码__点击checkbox,触发事件
<input type="checkbox" name="" onclick="ischeck(this);"> 我是复选框 <script> function ischeck(e){ if(e.checked){ console.log('选中'); }else{ console.log('未选中'); } } </script>
<input type="checkbox" name="" id="isbox"> 我是复选框 <script> document.getElementById('isbox').onclick = function(){ if(this.checked){ console.log('选中'); }else{ console.log('未选中'); } }; </script>PS:上面的两个原生JS检测 checkbox 的选中状态的代码原理都是一样的,只是写法不同而已!