checkbox的常用操作

来源：互联网发布：东方日升数据造假编辑：程序博客网时间：2024/06/14 22:53
<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <script src="../Script/Plugin/JQuery/jquery-2.1.3.min.js"></script>    <script type="text/javascript">        $(document).ready(function () {            // 判断是否勾选1            $('#judgeBtn1').click(function () {                if ($('#checkTest').is(':checked')) {                    alert('checked');                } else {                    alert('not checked');                }            });            // 判断是否勾选2            $('#judgeBtn2').click(function () {                if ($('#checkTest').prop('checked')) {                    alert('checked');                } else {                    alert('not checked');                }            });            // 勾选1            $('#checkBtn1').click(function () {                $('#checkTest').prop('checked', 'checked');            });            // 勾选2            $('#checkBtn2').click(function () {                $('#checkTest').prop('checked', true);            });            // 勾选3            $('#checkBtn3').click(function () {                $('#checkTest').prop({ checked: true });            });            // 勾选4            $('#checkBtn4').click(function () {                $('#checkTest').prop("checked", function () {                    return true;//函数返回true或false                });            });            // 勾选5，注意：仅能一次生效！！！            $('#checkBtn5').click(function () {                $('#checkTest').attr('checked', true);            });            // 取消勾选1            $('#cancelBtn1').click(function () {                $('#checkTest').attr('checked', false);            });            // 取消勾选2            $('#cancelBtn2').click(function () {                $('#checkTest').prop('checked', false);            });            // 建议使用prop()            // 判断：if($('#checkTest').prop('checked')){}else{}            // 勾选：$('#checkTest').prop('checked', true);            // 取消：$('#checkTest').prop('checked', false);</span>        });    </script></head><body>    <input type="checkbox" id="checkTest" />瞅啥呢？<br />    <input type="button" value="判断是否勾选1" id="judgeBtn1" /><br />    <input type="button" value="判断是否勾选2" id="judgeBtn2" /><br />    <br />    <input type="button" value="勾选1" id="checkBtn1" /><br />    <input type="button" value="勾选2" id="checkBtn2" /><br />    <input type="button" value="勾选3" id="checkBtn3" /><br />    <input type="button" value="勾选4" id="checkBtn4" /><br />    <input type="button" value="勾选5" id="checkBtn5" /><br />    <br />    <input type="button" value="取消勾选1" id="cancelBtn1" /><br />    <input type="button" value="取消勾选2" id="cancelBtn2" /><br /></body></html>
0 0