Bootstrap单选按钮结果

如何解决Bootstrap单选按钮结果

基于以下HTML代码段，设法获得两行单选按钮。当您单击第一行上的单选按钮，然后单击第二行上的任何单选按钮时，第一行上的单选按钮的结果就会消失。 如何确保单选按钮的两行结果一起出现。

add_action('woocommerce_cart_calculate_fees','buy_ten_get_one_free',10,1 );
function buy_ten_get_one_free( $cart ){
    if ( is_admin() && ! defined( 'DOING_AJAX' ) ) return;

    // Set HERE your targeted variable products IDs
    $targeted_product_ids = array( 464,465,466 );

    $each_n_items = 10; // Number of items required to get a free one
    $discount = 0; // Initializing
    $items_prices = array(); // Initializing 

    foreach ( $cart->get_cart() as $cart_item ) {
        if( in_array( $cart_item['product_id'],$targeted_product_ids ) ) {
            $qty = intval( $cart_item['quantity'] );

            for ( $i = 0; $i < $qty; $i++ ) {
                $items_prices[] = floatval( $cart_item['data']->get_price() );
            }
        }
    }
    $count_items_prices = count($items_prices);

    if ( $count_items_prices > $each_n_items ) {
        foreach ( $items_prices as $key => $price ) {
            if ( $key % ($each_n_items + 1) == 1 ) {
                $discount += number_format($price,2 );
            }
        }
    }

    if ( $discount > 0 ) {
        // displaying a custom notice (optional)
        wc_clear_notices();
        wc_add_notice( __("Buy 10 Get 1 Free"),'notice');

        // The discount
        $cart->add_fee( __("Buy 10 Get 1 Free"),-$discount,true  );
    }
}

谢谢

约翰

解决方法

如the MDN documentation on radio buttons中所述：

通过给组中的每个单选按钮定义单选组 同名。建立无线电组后，选择任何无线电 该组中的按钮会自动取消选择任何当前选择的 同一组中的单选按钮。

因此，如果要分开第二个<div>单选按钮，则必须为该组按钮使用不同的name：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


<!-- Start first Div -->
<div>

  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    <label class="form-check-label" for="inlineRadio1">1</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    <label class="form-check-label" for="inlineRadio2">2</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
    <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
  </div>

</div>
<!-- End first Div -->

<!-- Start second Div -->
<div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio4" value="option1">
    <label class="form-check-label" for="inlineRadio4">1</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio5" value="option2">
    <label class="form-check-label" for="inlineRadio5">2</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio6" value="option3" disabled>
    <label class="form-check-label" for="inlineRadio6">3 (disabled)</label>
  </div>

</div>

<!-- End Second Div -->