как добавить радио кнопку в виджет WordPress

Question

Как добавить радио-кнопку в форму виджета WordPress?Я был в состоянии добавить поля ввода, который сохраняется и работает нормально.Но у меня проблемы с радиокнопками.Кто-нибудь?

Это мой код для поля ввода:

<p><label for="<?php echo $this->get_field_id('id'); ?>"><?php _e('Video ID:'); ?> 
    <input class="widefat" id="<?php echo $this->get_field_id('id');  ?>" 
    name="<?php echo $this->get_field_name('id'); ?>" 
    type="text" value="<?php echo $id; ?>" /></label></p>

, а это мой переключатель

<input type="radio" name="video_size" value="small"> Small<br>
    <input type="radio" name="video_size" value="full" checked> Full 

Answer 1

Создайте каждую радиокнопку и убедитесь, что они находятся в одной и той же «группе».Ниже приведена базовая HTML-версия того, что вы хотите.

<input type="radio" name="group1" value="small" checked>Small<br />
<input type="radio" name="group1" value="full"> Full<br />

Обратите внимание на name="group1" - это группирует два выбора вместе, чтобы вы могли выбрать один или другой.checked отмечает выбор по умолчанию при загрузке переключателей.

Версия WordPress потребует некоторой логики для проверки того, что выбрал пользователь.Вам нужно будет проверить, выбран ли small или full, и дополнить его соответствующим атрибутом.

Например,

if($size == 'Full')
{
     echo '<input type="radio" name="group1" value="small">Small<br />' . "\n";
     echo '<input type="radio" name="group1" value="full" checked> Full<br />' . "\n";
     //This will out put the radio buttons with Full chosen if the user selected it previously.
}
else
{
     echo '<input type="radio" name="group1" value="small" checked>Small<br />' . "\n";
     echo '<input type="radio" name="group1" value="full"> Full<br />' . "\n";
     //This will out put the radio buttons with Small selected as default/user selected.
}

Answer 2

Для всех, кто борется с проблемой JavaScript, проверяется неправильно, проверяется , убедитесь, что HTML не имеет пустых атрибутов checked="". Добавляйте атрибут только к выбранному переключателю.

Этот код работает для виджета с переключателями без операторов if:

function form( $instance ) {

    /* Option carrier is 'ecw_column' */
    $ecw_column = isset( $instance['ecw_column'] ) ? $instance['ecw_column'] : 'ecw_column_none';

    echo '<p>';

    $value = 'ecw_column_1';

    echo '<input value="'. $value .'" class="widefat" id="'. $this->get_field_id($value) .'" name="'. $this->get_field_name('ecw_column') .'" type="radio"'. ($ecw_column == $value ? ' checked="checked"' : '') .' />';
    echo '<label for="'. $this->get_field_id($value) .'">'. __('Column start') .'</label>';
    echo '<br/>';

    $value = 'ecw_column_2';

    echo '<input value="'. $value .'" class="widefat" id="'. $this->get_field_id($value) .'" name="'. $this->get_field_name('ecw_column') .'" type="radio"'. ($ecw_column == $value ? ' checked="checked"' : '') .' />';
    echo '<label for="'. $this->get_field_id($value) .'">'. __('Breakpoint') .'</label>';
    echo '<br/>';

    $value = 'ecw_column_3';

    echo '<input value="'. $value .'" class="widefat" id="'. $this->get_field_id($value) .'" name="'. $this->get_field_name('ecw_column') .'" type="radio"'. ($ecw_column == $value ? ' checked="checked"' : '') .' />';
    echo '<label for="'. $this->get_field_id($value) .'">'. __('Column end') .'</label>';
    echo '<br/>';

    /* Default value */
    $value = 'ecw_column_none';

    echo '<input value="'. $value .'" class="widefat" id="'. $this->get_field_id($value) .'" name="'. $this->get_field_name('ecw_column') .'" type="radio"'. ($ecw_column == $value ? ' checked="checked"' : '') .' />';
    echo '<label for="'. $this->get_field_id($value) .'">'. __('Current') .'</label>';

    echo '</p>';
}

Answer 3

Используйте одно и то же имя для всех переключателей, принадлежащих к одной группе, и используйте его для доступа к значению.

Например, если у вас есть радиогруппа под названием «пол» со значениями «мужской» и «женский», используйте «мужской / женский» для всех вызовов get_field *, кроме get_field_name. Используйте «пол» для get_field_name.

В вашем коде widget () и update () используйте только «пол» - в качестве значений будут указываться либо мужской, либо женский.

Answer 4

Я пытался использовать это, но это не так, сохранить мой выбор .. Я думаю, я не понимаю, откуда взялся размер var $ в этом скрипте?

Моя проблема в том, что переключатели не останутся проверенными. Я пытался использовать решение if / else .. но проверяется только один выбор .. (я знаю, что по логике это странно)

Мой код является частью виджета, который я создаю (wp widget) ...

вот мой код:

        <!-- Your Name: Text Input -->
    <?php if( $visiblecategories == showempty ) { ?>
    <p>
        <label for="<?php echo $this->get_field_id( 'visiblecategories' ); ?>"><?php _e('Show Empty Category:', 'badcategory'); ?></label><br />
        <input type="radio" id="<?php echo $this->get_field_id( 'visiblecategories' ); ?>" name="<?php echo $this->get_field_name( 'visiblecategories' ); ?>" value="showempty" style="" checked /> Show Empty<br />
        <input type="radio" id="<?php echo $this->get_field_id( 'visiblecategories' ); ?>" name="<?php echo $this->get_field_name( 'visiblecategories' ); ?>" value="hideempty" style="" /> Hide Empty<br />            
    </p>
    <?php } else { ?>
    <?php echo $visiblecategories; ?>
    <p>
        <label for="<?php echo $this->get_field_id( 'visiblecategories' ); ?>"><?php _e('Show Empty Category:', 'badcategory'); ?></label><br />
        <input type="radio" id="<?php echo $this->get_field_id( 'visiblecategories' ); ?>" name="<?php echo $this->get_field_name( 'visiblecategories' ); ?>" value="showempty" style="" /> Show Empty<br />
        <input type="radio" id="<?php echo $this->get_field_id( 'visiblecategories' ); ?>" name="<?php echo $this->get_field_name( 'visiblecategories' ); ?>" value="hideempty" style="" checked /> Hide Empty<br />            
    </p>
    <?php } ?>