input标签，type=checkbox,点击选中，再点击取消选中

html:

<label for="checkbox" class="agreeQuery"><input type="checkbox" id="checkbox"  />我已同意并授权优职贷调用第三方数据查询</label>

css:

#checkbox{

                width: 1.15rem;
                height: 1.15rem;
                margin:0 0.76rem 0 4%;
                 -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAORJREFUSA3tl7ENwkAMRe2ICdJFggr6rEDLIowAK0BGyAKMQMsK9HQg0rGC8390aS5tTBpfEemcyO/fUwqfCtbuamsTacRkj23FmsPqROWhIqfXWT9KKCBPMykdYJOWqvJDsV6lk5ZIc0eaI9NMvp6hkKy2OOABrEa3F/uib4UkGy/omHuAm7yx7wpC+cIbmjEqghdZAf6b9lAdqt0MxM/lpjZvHKpzI277UO2mNm8cqnMjbnuq7tg9DfZuoIyB8RbXChYx2Lee8HGgJ4vMxa4wRRrka6S4IcugfUg1/4OXNjJqMnv40kWvlDf/0AAAAABJRU5ErkJggg==);
                background-size: 1.15rem 1.15rem;
            }
            #checkbox:checked{
                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAihJREFUSA3tl79PFEEUgL9ZsNPGhAQSC6MWaMFBtEBj1ERjNBI6QwgRA4kasCSBRkwoNEpi/Bds/IEBawoKYqzooKIw10A4hICCoCCa5b3buwzeMXu4e4uFvuLu7Zt575v3ZnZmxyBy4ql/xIdBfC7JY43aEpAMhnEDvR/7zKxRqEAmfZ/DCcCKQhrDshhTlblM9wWqo8gmaBj0cuUtGlmiBplSTwBJzWnY2GsU/FfkPzh22SvkRX14BT50Q2u9O1xZSy1MnjVB+2moPgT3z+0T+PF1aDplYe/TVi/UypZx/2W4WWfDT8zAwJh9LtTKAu65ALfP2NCTc3BnGDZ/WluhFhvc1QhdZ23Y6QXoeAvrP6xtN80Jrq2Cflmd54/u5hbYdBH1XLTt6SVZWEOwumltLs0Jft4s5ZPAL1qgraHYXedT5zUvM1/g1htY/pa3hP87wZ+/W8eBq7/Db5yER9dAjriszH8NoJ/WrE8prdLV4cEovGyFqoNBD4WrKETfVS8HXVqX8kqmsytB+15/zfEnckI65Jic0jvh2m3rFxyoCBxWNqQSr2B60REgxOwstfqk5Vuh7TUs7ihhHromC6hTVm8UqMYOBbvgG1twd0S+lzLaI5qUBGvYfOZTAppbhXvvQHemOBI6x3ECl/LdU8algkRp/zfBMdZmlCJnfTKeXisiu0d1FKbufL25a0XUMH/kpyxlenqBEs+UZC57FEmWXS9tykgpcxtuN4oZpE8H2QAAAABJRU5ErkJggg==);
                background-size: 1.15rem 1.15rem;
            }
            .agreeQuery{
                display: flex;
                align-items: center;
                height: 1.3rem;
                margin-top: 1.53rem;
                font-family: PingFangSC-Regular;
                font-size: 0.92rem;
                color: #B5B5B5;
                letter-spacing: 0;
            }

js:
可以根据 $('#checkbox').prop("checked")来判断是否选中，如果$ ('#checkbox').prop("checked") == false，则没有选中，$('#checkbox').prop("checked") == true代表选中
注意的地方尽量用子标签input来绑定点击事件，然后通过for="checkbox"和id="checkbox"来达到点击点击子标签和父标签都可以起作用。好像涉及到了事件冒泡的知识点了，花时间去研究下

input标签，type=checkbox,点击选中，再点击取消选中

推荐阅读更多精彩内容