2017-02-22 13 views
0

Я создал несколько переключателей, которые при нажатии отображали цену. Код, я использую ниже ..Радиоустройства, которые не показаны, отмечены

<label for='<?php echo $price; ?>' class="tabs"> 
    <input type="radio" name="j" class="radioBtn" id='<?php echo $price; ?>' value="<?php echo $price; ?>" onclick="calculate(this);" /> 
    <?php echo $number; ?> 
    </label> 

цена затем показывается, как это:

<span class="prices" id="output"></span> 

по

function calculate(obj) { document.getElementById("output").innerHTML = obj.value;} 

цены и кнопки работают правильно, но я нужно стилизовать метку, чтобы показать, что выбрана правильная кнопка. В DOM говорится, что радиовход проверен, но он не отображается в HTML.

Мне также нужно установить первый флажок, который будет выбран по умолчанию.

Может ли кто-нибудь помочь мне в правильном направлении, пожалуйста?

Пэдди

+0

В зависимости от того, какую версию HTML вы используете, атрибут id ваших полей ввода может быть недействительным. Например, HTML4 требует, чтобы идентификатор начинался с буквы. Таким образом, цена не будет лучшим выбором уникального идентификатора, особенно если у вас есть 2 одинаковых цены. – clarmond

+0

Все цены на данный момент разные. Будет ли это причиной того, что радиовход не отображается, как отмечено? – paddywinz

+0

Я создал статическую версию этого кода (без переменных PHP), и он работал нормально. Можно ли увидеть весь отображаемый HTML? – clarmond

ответ

1

grofar.com сайт выглядит хорошо для меня. Когда вы говорите, что стиль не работает на этикетке, что именно вы имеете в виду? Вы пытаетесь применить другой цвет, шрифт и т. Д.?

Что касается первого выбора, выбранного по умолчанию, у вас есть несколько вариантов. Первым будет использование PHP для определения первого и добавление атрибута checked к элементу input. Например, если вы делаете петлю, используйте, если/то заявление, чтобы установить проверенную атрибут, если счетчик цикла равен 1.

Второй вариант заключается в использовании JQuery, чтобы выбрать первый ящик:

$(function() { 
    $("input[name='j']:first").prop("checked", true); 
}); 

Однако, с этим методом, ваша функция calculate не вызывается и, следовательно, цена не обновляется.

Третий вариант заключается в использовании JQuery для имитации щелчок первой коробки:

$(function() { 
    $("input[name='j']:first").click(); 
}); 

Это будет выбрать окно и обновить цену.

+0

Thank вы так много, третий вариант работал шармом. – paddywinz

+0

Я пытаюсь, чтобы проверенная радиометка была другого цвета и удаляла сам вход. Однако без отмеченного ввода я не могу использовать jQuery для добавления класса к родительскому – paddywinz

+0

Вместо удаления ввода вы можете просто скрыть его ('' 'onclick =" вычислить (this); $ (this) .hide() «' '') или отключить его ('' 'onclick =" вычислить (this); $ (this) .prop ('disabled', true) "' '')? Затем вы можете применить новый стиль к родительскому. – clarmond

Смежные вопросы