Widget back end radio button issue

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)

Topic widget-text functions php widgets html Wordpress

Category Web


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!

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.