小辉网络社区致力于优质软件,活动线报,游戏辅助,绿色工具等资源共享,好货不私藏!

HTML复选框选中与未选中触发事件的方法

小辉工作室 其他技术教程

今天在做一个不需要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 的选中状态的代码原理都是一样的,只是写法不同而已!

温馨提示:如有转载或引用以上内容请将本文链接作为出处标注!百度已收录

免责声明:本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。侵删请致信E-mail:431228450@qq.com

标签 暂无标签
资源分享
评论列表