<label for="1" class="z-label"> <input type="radio" class="zui-radiobox" value="" id="1" name="a"> <div class="zui-radiobox-tip"></div> <span class="zui-radiobox-text">男性</span> </label>
//radio scss .z-label { position: relative; cursor: pointer; display:inline-block; margin-right: 0.30rem; color: #999999; font-size:0.30rem; &:last-child{ margin-right:0; } .zui-radiobox { display: none; } .zui-radiobox-tip { display: inline-block; width: 20px; height: 20px; border: 1px solid #999999; border-radius: 100%; position: relative; background: #fff; vertical-align: middle; margin-top: -2px; margin-bottom: 1px; box-sizing: border-box; margin-right:0.15rem; } .zui-radiobox:checked+.zui-radiobox-tip { background: #fff; border: 1px solid $main-color; &::after { content: "200B"; display: block; width: 14px; height: 14px; background: $main-color; border-radius: 50%; margin: auto; margin-top:2px; } } } //checkbox .z-label { position: relative; cursor: pointer; display:inline-block; margin-right: 0.30rem; color: #999999; font-size:0.30rem; &:last-child{ margin-right:0; } .zui-checkbox { display: none; } .zui-checkbox-tip { display: inline-block; width: 18px; height: 18px; border: 1px solid #999999; position: relative; background: #fff; vertical-align: middle; margin-top: -2px; margin-bottom: 1px; box-sizing: border-box; margin-right:0.15rem; } .zui-checkbox:checked+.zui-checkbox-tip { background: #fff; border: 1px solid $main-color; box-sizing: border-box; &::after { content: "200B"; display: block; width: 12px; height: 12px; background: $main-color; margin-left: 2px; margin-top:2px; } } }
//单选按钮再次点击取消选中效果js $("input[type='radio']").on('click', function() { if ($(this).data('ischecked') == true) { $(this).prop('checked', false); $(this).data('ischecked', false); } else { $(this).prop('checked', true); $(this).data('ischecked', true); } $(this).parents('.z-label').siblings('.z-label').find("input[type='radio']").data('ischecked', false); });