javascript - 嵌套在输入中时如何设置复选框的样式

Question

与常规的样式设置方法不同....我有一个 Wordpress 插件，它将输入复选框与标签嵌套在一起。

由于父子关系，我有 90% 的把握不能仅使用 CSS 来完成此操作，并且在这方面我已经尝试过但都失败了。我的标记是:

<label class="bundled_product_optional_checkbox">
<input class="bundled_product_checkbox" type="checkbox" name="bundle_selected_optional_1" value=""> 
Add for 
<span class="price">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">£</span>30.00
</span>
<small class="woocommerce-price-suffix">ex. VAT</small>
</span>
</label>

我想要一个自定义图像用于复选标记和已选中。我需要在 CSS + js 中执行此操作吗？

Answer 1

在您的情况下，为了完全符合您的需要，我相信这段 JavaScript 代码将是最适合您的解决方案:

<label class="bundled_product_optional_checkbox">
    <input class="bundled_product_checkbox" type="checkbox" name="bundle_selected_optional_1" value=""> 
    Add for 
    <span class="price">
        <span class="woocommerce-Price-amount amount">
            <span class="woocommerce-Price-currencySymbol">£</span>30.00
            </span>
        <small class="woocommerce-price-suffix">ex. VAT</small>
    </span>
    <
</label>

<style type="text/css">
    .bundled_product_optional_checkbox .bundled_product_checkbox{
        display: none;
    }
    .bundled_product_optional_checkbox .custom-checkbox{
        content: "";
        width: 20px;
        height: 20px;
        display: inline-block;
        border: 2px solid blue;
        position: left;
        border-radius: 5px;
    }
    .bundled_product_optional_checkbox .bundled_product_checkbox:checked + .custom-checkbox{
        background: blue;
    }
</style>

<script type="text/javascript">
    jQuery( function( $ ){
        $('.bundled_product_optional_checkbox .bundled_product_checkbox').after('<span class="custom-checkbox"></span>');
    } );
</script>