JQ监控checkbox的选中与否做出相应改变

最新推荐文章于 2021-09-28 15:37:15 发布

原创最新推荐文章于 2021-09-28 15:37:15 发布 · 8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JQ #chexbox

本文介绍了一种使用HTML和jQuery实现表单控制的方法，包括如何通过jQuery监控复选框的状态变化，并根据其状态显示或隐藏提交按钮。此外，还展示了如何在复选框被选中时为提交按钮添加点击事件。

Html代码：

   <tr>
     <td height="90" align="center" class="color999">
       <input name="Agreements" type="checkbox" />我已认真阅读并同意遵守<a href="#" class="color-green">用户服务协议</a>
    </td>
   </tr>
   <tr>
     <td height="50" align="center">
       <input type="button" name="SureBtn" id="SureBtn" value="完成提交" class="cre-button" style="display: none" />
    </td>
    </tr>

JQ代码：

  <script>
        $(function () {
            //监控checkbox代码
            $("input[name='Agreements']").on("change", function () {
                var change = $("input[type='checkbox']").is(':checked'); //checkbox选中判断
                if (change) {

                    $("#SureBtn").css("display", "block");
                    $("#SureBtn").click(function () {
                        var str = $(" input[name='WorkYears']").val();
                        alert($("input[name='Agreements']").is(':checked'));
                    })
                } else {
                    $("#SureBtn").css("display", "none");
                    return false;
                }
            })
        })
    </script>