Widget back end radio button issue

Question

I am using such kind of arrangements in my widget.php →

<p> <input class="radio" type="radio" <?php checked( $instance[ 'the_style_1' ], 'on' ); ?> id="<?php echo $this->get_field_id( 'the_style_1' ); ?>" name="<?php echo $this->get_field_name( 'the_style_1' ); ?>" />
<label for="<?php echo $this->get_field_id( 'the_style_1' ); ?>">This will display the snippet style 1</label>
</p>

<p> <input class="radio" type="radio" <?php checked( $instance[ 'the_style_2' ], 'on' ); ?> id="<?php echo $this->get_field_id( 'the_style_2' ); ?>" name="<?php echo $this->get_field_name( 'the_style_2' ); ?>" />
<label for="<?php echo $this->get_field_id( 'the_style_2' ); ?>">This will display the snippet style 2</label>
</p>

But in the backend, the radio buttons are not working the way they should do(only one chosen at a time) →

Answer 1

You got that problem because the radio buttons have different name; i.e. the_style_1 and the_style_2.

So I'd suggest you to use the_style as the name for both the radio buttons:

<p> <input class="radio" type="radio" <?php checked( $instance[ 'the_style' ], 'style_1' ); ?> id="<?php echo $this->get_field_id( 'the_style_1' ); ?>" name="<?php echo $this->get_field_name( 'the_style' ); ?>" value="style_1" />
<label for="<?php echo $this->get_field_id( 'the_style_1' ); ?>">This will display the snippet style 1</label>
</p>

<p> <input class="radio" type="radio" <?php checked( $instance[ 'the_style' ], 'style_2' ); ?> id="<?php echo $this->get_field_id( 'the_style_2' ); ?>" name="<?php echo $this->get_field_name( 'the_style' ); ?>" value="style_2" />
<label for="<?php echo $this->get_field_id( 'the_style_2' ); ?>">This will display the snippet style 2</label>
</p>

And in the widget 'display' callback function, you can do something like this:

public function widget( $args, $instance ) {
    // ... other code here.

    // Here, style_1 would be the default style, unless you change it below.
    $the_style = isset( $instance['the_style'] ) ? $instance['the_style'] : 'style_1';

    if ( 'style_1' === $the_style ) {
        // Do something if the_style is style_1
    } elseif ( 'style_2' === $the_style ) {
        // Do something if the_style is style_2
    }

    // ... other code here.
}

(And you'd also need to update the update() function of the widget class.)

Alternatively, if you just want/need to use the same name for both the radio buttons, then you'd need to use JavaScript/jQuery to limit the selection to just one of the radio buttons. See below for a sample jQuery script you can try:

<script>
jQuery( function( $ ){
    // If the_style_1 is checked, uncheck the_style_2.
    $( '#<?php echo $this->get_field_id( 'the_style_1' ); ?>' ).on( 'change', function(){
        $( '#<?php echo $this->get_field_id( 'the_style_2' ); ?>' ).prop( 'checked', ! this.checked );
    } );

    // If the_style_2 is checked, uncheck the_style_1.
    $( '#<?php echo $this->get_field_id( 'the_style_2' ); ?>' ).on( 'change', function(){
        $( '#<?php echo $this->get_field_id( 'the_style_1' ); ?>' ).prop( 'checked', ! this.checked );
    } );
} );
</script>

You'd add that script in the widget options form (i.e. in the form() function of the widget class), but make sure jQuery has already been loaded.

Hope that helps!