2016-03-16 2 views
1

Я пытаюсь присвоить 2 значения каждому переключателю, чтобы вывести в 2 поля. Но это не сработает. Вот код им с помощью:Назначить 2 значения для каждого переключателя

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <script> 
 
    function check(browser) { 
 
     document.getElementById("answer").value=browser; 
 
    document.getElementById("answerB").valueB=browser; 
 
    } 
 
    </script> 
 
    </head> 
 
    <body> 
 
    
 
    <p>What's your favorite browser?</p> 
 
    
 
    <form> 
 
    <input type="radio" name="browser" onclick="check(this.value)"  value="400mb", valueB="600mb">Internet Explorer<br> 
 
    <input type="radio" name="browser" onclick="check(this.value)"  value="600mb", valueB="700mb">Firefox<br> 
 
    <input type="radio" name="browser" onclick="check(this.value)"  value="500mb", valueB="500mb">Opera<br> 
 
    <input type="radio" name="browser" onclick="check(this.value)"  value="500mb", valueB="500mb">Google Chrome<br> 
 
    <input type="radio" name="browser" onclick="check(this.value)"  value="300mb", valueB="300mb">Safari<br> 
 
    <br> 
 
    PC Min Ram Requirement is: <input type="text" id="answer" size="20"> 
 
    Mac Min Ram Requirement is: <input type="text" id="answerB" size="20"> 
 
    </form> 
 
    
 
    </body> 
 
    </html>

ответ

0

Я исправил ваш код с помощью string.split и без каких-либо внешних библиотек. У вас также была контрольная ошибка, пытающаяся получить доступ к valueB на цель input.

<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
      <script> 
 
       function check(browser) { 
 
        var splitValues = browser.split(';'); 
 
        document.getElementById("answer").value=splitValues[0]; 
 
        document.getElementById("answerB").value=splitValues[1]; 
 
       } 
 
      </script> 
 
     </head> 
 
     <body> 
 
     
 
     <p>What's your favorite browser?</p> 
 
     
 
     <form> 
 
      <input type="radio" name="browser" onclick="check(this.value)"  value="400mb;600mb">Internet Explorer<br> 
 
      <input type="radio" name="browser" onclick="check(this.value)"  value="600mb;700mb">Firefox<br> 
 
      <input type="radio" name="browser" onclick="check(this.value)"  value="500mb;500mb">Opera<br> 
 
      <input type="radio" name="browser" onclick="check(this.value)"  value="500mb;500mb">Google Chrome<br> 
 
      <input type="radio" name="browser" onclick="check(this.value)"  value="300mb;300mb">Safari<br> 
 
      <br> 
 
      PC Min Ram Requirement is: <input type="text" id="answer" size="20"> 
 
      Mac Min Ram Requirement is: <input type="text" id="answerB" size="20"> 
 
     </form> 
 
     
 
     </body> 
 
    </html>

1

Вы можете установить значение, используя data- свойство, как,

data-value="400mb" data-valueB="600mb" 

То есть,

<input type="radio" class = "radiobutton" onclick="check(this)" name="browser" data-value="400mb" data-valueB="600mb" /> 

Тогда вы можете получить доступ к в функции check usin г jQuery как,

function check(rb) { 
     document.getElementById("answer").value = $(rb).data('value'); 
     document.getElementById("answerB").value = $(rb).data('valueB'); 
    } 

или

$('.radiobutton').click(function() { 
      document.getElementById("answer").value = $(this).data('value'); 
      document.getElementById("answerB").value = $(this).data('valueB'); 
} 
+1

я был слишком медленным :) собирался ответить на тот же – Eon

+0

Этот ответ не очень полезно, так как OP не использует JQuery. – forgivenson

+0

@ forgivenson: Я отредактировал свой ответ. –

1

чисто JS решение:

некоторых замечаний: если вы передаете this.value к функции, то вы наклоненный доступ больше VALUE млрд, проходит только весь элемент. Чтобы установить значение, используйте только значениеTargetElement.value, а не значение и значение B (это просто неправильно). Не знаю, почему вы ве запятую после значения (Thats тоже неправильно)

function check(browser) { 
 
    document.getElementById("answer").value = browser.getAttribute("value"); 
 
    document.getElementById("answerB").value = browser.getAttribute("valueB"); 
 
}
<form> 
 
    <input type="radio" name="browser" onclick="check(this)" value="400mb" valueB="600mb">Internet Explorer 
 
    <br> 
 
    <input type="radio" name="browser" onclick="check(this)" value="600mb" valueB="700mb">Firefox 
 
    <br> 
 
    <input type="radio" name="browser" onclick="check(this)" value="500mb" valueB="500mb">Opera 
 
    <br> 
 
    <input type="radio" name="browser" onclick="check(this)" value="500mb" valueB="500mb">Google Chrome 
 
    <br> 
 
    <input type="radio" name="browser" onclick="check(this)" value="300mb" valueB="300mb">Safari 
 
    <br> 
 
    <br>PC Min Ram Requirement is: 
 
    <input type="text" id="answer" size="20">Mac Min Ram Requirement is: 
 
    <input type="text" id="answerB" size="20"> 
 
</form>

2

У вас есть несколько различных вопросов здесь. Во-первых, текстовое поле answerB должно иметь свой набор value, а не valueB комплект. Во-вторых, вы устанавливаете оба значения в одно и то же значение. Итак, вместо передачи this.value в функцию check, просто пройдите this. Затем вы можете использовать .getAttribute('valueB') для доступа к своему пользовательскому свойству.

Кроме того, не помещайте запятые в теги html. Я удалил их из ваших тегов <input>.

Смотрите ниже:

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <script> 
 
    function check(browser) { 
 
     document.getElementById("answer").value=browser.value; 
 
     document.getElementById("answerB").value=browser.getAttribute('valueB'); 
 
    } 
 
    </script> 
 
    </head> 
 
    <body> 
 
    
 
    <p>What's your favorite browser?</p> 
 
    
 
    <form> 
 
    <input type="radio" name="browser" onclick="check(this)" value="400mb" valueB="600mb">Internet Explorer<br> 
 
    <input type="radio" name="browser" onclick="check(this)" value="600mb" valueB="700mb">Firefox<br> 
 
    <input type="radio" name="browser" onclick="check(this)" value="500mb" valueB="500mb">Opera<br> 
 
    <input type="radio" name="browser" onclick="check(this)" value="500mb" valueB="500mb">Google Chrome<br> 
 
    <input type="radio" name="browser" onclick="check(this)" value="300mb" valueB="300mb">Safari<br> 
 
    <br> 
 
    PC Min Ram Requirement is: <input type="text" id="answer" size="20"> 
 
    Mac Min Ram Requirement is: <input type="text" id="answerB" size="20"> 
 
    </form> 
 
    
 
    </body> 
 
    </html>

0

этот код есть некоторые проблемы.

1) вам нужно передать два значения (или сам элемент) к функции

onclick="check(this)" 

это происходит потому, что вы просто передавая «значение» атрибут функции.

2) вам необходимо получить «значение B» в качестве обычного атрибута. свойство «valueB» не существует и поэтому в настоящее время не определено.

function check(element) { 
     document.getElementById("answer").value=element.value; 
     document.getElementById("answerB").value=element.getAttribute("valueB"); 
    } 

в функции проверки вы также пытается установить свойство «» из VALUE млрд элемента «answerB», который не имеет смысла (вам необходимо установить нормальное значение в текстовое поле :))

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