Изменить переключатели на флажки

-4

У меня есть нижняя форма с переключателями, и я хочу их заменить (2 варианта без каких-либо спасибо) с помощью простых флажков - оставляя 3 флажка.Изменить переключатели на флажки

Я не могу изменить JS, чтобы заставить его работать ... Я пробовал настраивать JS, но он останавливает возможность вычисления или перенаправления - что является основной целью формы!

Помощь!

<html> 
<head></head> 
<body> 
<form onSubmit="submitForm();" id="myForm" type="get"> 
<input type="radio" name="myRadio1" data-op="0" value="10" onClick="calcNow();" selected />Option A&nbsp; 
<input type="radio" name="myRadio1" data-op="1" value="120" onClick="calcNow();" />No thanks<br/> 
<input type="radio" name="myRadio2" data-op="0" value="10" onClick="calcNow();" selected />Option B&nbsp; 
<input type="radio" name="myRadio2" data-op="1" value="20" onClick="calcNow();" />No thanks<br/> 
<input id="myCheckbox" name="myCheckbox" type="checkbox" value="10" onClick="calcNow();" />Otion C<br/> 
<input id="myTotal" name="myTotal" type="text" value="" disabled="disabled" /><br/> 
<input type="button" id="myButton" onClick="submitForm();" value="Continue" /> 
</form> 

<script type="text/javascript"> 
var pages = [[["http://mysite.com/page1.html","http://mysite.com/page2.html"],["http://mysite.com/page3.html","http://mysite.com/page4.html"]],[["http://mysite.com/page5.html","http://mysite.com/page6.html"],["http://mysite.com/page7.html","http://mysite.com/page8.html"]]]; 

function calcNow() 
{ 
    var cb = document.getElementById("myCheckbox"); 
    var cost1 = getRadioValue("myRadio1"); 
    var cost2 = getRadioValue("myRadio2"); 
    var cost3 = cb.checked ? parseInt(cb.value) : 0; 
    var costTotal = cost1 + cost2 + cost3; 
    document.getElementById("myTotal").value = costTotal; 

    var op1 = getRadioData("myRadio1", "op"); 
    var op2 = getRadioData("myRadio2", "op"); 
    var op3 = cb.checked ? 1 : 0; 

    if (op1 != undefined && op2 != undefined && op3 != undefined) 
    { 
     return pages[op1][op2][op3]; 
    } 
    return undefined; 
} 

function submitForm() 
{ 
    var page = calcNow(); 
    if (page != undefined) 
    { 
     // ---- To popup ---- 
     //alert(page); 
     // ---- To navigate ---- 
     location.href = page; 
     // ---- To alter post ---- 
     //var form = document.getElementById("myForm"); 
     //form.action = page; 
     //form.submit(); 
    } 
    else 
    { 

     alert("Please answer all questions."); 
    } 
} 

function getRadioValue(name) 
{ 
    var controls = document.getElementsByName(name); 
    for (var i = 0; i < controls.length; i++) { 
     if (controls[i].checked) { 
      return parseInt(controls[i].value); 
     } 
    } 
    return 0; 
} 

function getRadioData(name, attribute) 
{ 
    var controls = document.getElementsByName(name); 
    for (var i = 0; i < controls.length; i++) { 
     if (controls[i].checked) { 
      return parseInt(controls[i].dataset[attribute]); 
     } 
    } 
    return undefined; 
} 
</script> 
</body> 
</html>

источник

2013-05-11 dougninja

Этот код заставляет меня злиться. Одно дело попробовать, другое - это просто догадываться. Я имею в виду, почему бы не поместить обработчик onCLick на свой тег тела, черт возьми, что может работать. – iGanja

Ур, извините! Можете ли вы изменить код? – dougninja

Предлагаю для вас, и у меня нет вашего Javascript в вашем случае.

Есть два предложения. Вы заменяете входной радиоприемник на два входа.

<input type="checkbox" name="myRadio1" data-op="1" value="on" onClick="calcNow();" />No thanks<br/> 
<input type="checkbox" name="myRadio2" data-op="0" value="10" onClick="calcNow();" selected />Option B&nbsp;

Это легко, но теперь это сложно. Когда флажок установлен, вызовите функцию calcNow(), но если этот флажок не установлен, вы не можете вызвать функцию. Но для управления я предлагаю ваш поиск по GOOGLE.

Для меня лучше, чтобы ваш добавить кнопку, вызовите функцию submitForm();

Это example for checked and unchecked.

EDIT:

Я работал на вашем случае и есть решение JSDIFFLE

источник

2013-05-11 09:57:18

Спасибо Mirko, могу я удалить предупреждение «Пожалуйста, ответьте на все вопросы»? Я также не могу проверить и скрыть один из флажков без необходимости физически проверять ... Я пробовал: 'checked style =" display: none; "' – dougninja

Посмотрите на решение редакции, прежде чем Я ел –

Это решение? Почему вы задали мне ответ, как лучше ответить? –

Изменить переключатели на флажки

ответ

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