Невозможно добавить значение кнопки радио

$(document).ready(function() { 
 
    $('.stars input[type="radio"]').on('change', function(){ 
 
     var radio1 = (typeof $('.starRadio:checked').eq(0).val() == 'undefined') ? 0 : Number($('.starRadio:checked').eq(0).val()); 
 
     var radio2 = (typeof $('.starRadio:checked').eq(1).val() == 'undefined') ? 0 : Number($('.starRadio:checked').eq(1).val()); 
 
     $('.output').html(radio1 + radio2) 
 
    }) 
 
});

<html> 
 
<head><title>Star Rating</title></head> 
 
<body> 
 
<link rel="stylesheet" href="style.css" /> 
 
<form> 
 
<h2> Teacher 1: </h2> 
 
<div class="stars"> 
 
     <input type="radio" name="star_a" class="star-1" id="star_a-1" value=1 /> 
 
     <label class="star-1" for="star_a-1">1</label> 
 
     <input type="radio" name="star_a" class="star-2" id="star_a-2" value=2 /> 
 
     <label class="star-2" for="star_a-2">2</label> 
 
     <input type="radio" name="star_a" class="star-3" id="star_a-3" value=3 /> 
 
     <label class="star-3" for="star_a-3">3</label> 
 
     <input type="radio" name="star_a" class="star-4" id="star_a-4" value=4 /> 
 
     <label class="star-4" for="star_a-4">4</label> 
 
     <input type="radio" name="star_a" class="star-5" id="star_a-5" value=5 /> 
 
     <label class="star-5" for="star_a-5">5</label> 
 
     <span></span> 
 
    </div> 
 

 
<div class="stars"> 
 
     <input type="radio" name="star_b" class="star-1" id="star_b-1" value=1 /> 
 
     <label class="star-1" for="star_b-1">1</label> 
 
     <input type="radio" name="star_b" class="star-2" id="star_b-2" value=2 /> 
 
     <label class="star-2" for="star_b-2">2</label> 
 
     <input type="radio" name="star_b" class="star-3" id="star_b-3" value=3 /> 
 
     <label class="star-3" for="star_b-3">3</label> 
 
     <input type="radio" name="star_b" class="star-4" id="star_b-4" value=4 /> 
 
     <label class="star-4" for="star_b-4">4</label> 
 
     <input type="radio" name="star_b" class="star-5" id="star_b-5" value=5 /> 
 
     <label class="star-5" for="star_b-5">5</label> 
 
     <span></span> 
 
\t </div> 
 
     
 
<span id="sum"></span> 
 
</form> 
 
<script src="script.js"> 
 
</body> 
 
</html>

Это код, который Im пытается выполнить. Но я не получаю никаких результатов по HTML-коду, который я запускаю в своем браузере. Я действительно смущен. Код работает отлично на скрипке, но я не знаю, почему он не работает в моем браузере.

источник

2015-11-07 Vishnu Rahul

YAY, вы использовал мой код! –

У всех радио есть один и тот же класс, так что JQuery можно легко выбрать их
все атрибуты HTML должны иметь '' или ""
и проверить, что значения определены еще делают их 0

$(document).ready(function() { 
 
    $('.stars input[type="radio"]').on('change', function(){ 
 
     var radio1 = (typeof $('.starRadio:checked').eq(0).val() == 'undefined') ? 0 : Number($('.starRadio:checked').eq(0).val()); 
 
     var radio2 = (typeof $('.starRadio:checked').eq(1).val() == 'undefined') ? 0 : Number($('.starRadio:checked').eq(1).val()); 
 
     $('.output').html(radio1 + radio2) 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="stars"> 
 
    <input type="radio" name="star_a" class="starRadio star-1" id="star_a-1" value="1" /> 
 
    <label class="star-1" for="star_a-1">1</label> 
 
    
 
    <input type="radio" name="star_a" class="starRadio star-2" id="star_a-2" value="2"/> 
 
    <label class="star-2" for="star_a-2">2</label> 
 
    
 
    <input type="radio" name="star_a" class="starRadio star-3" id="star_a-3" value="3"/> 
 
    <label class="star-3" for="star_a-3">3</label> 
 
    
 
    <input type="radio" name="star_a" class="starRadio star-4" id="star_a-4" value="4"/> 
 
    <label class="star-4" for="star_a-4">4</label> 
 
    
 
    <input type="radio" name="star_a" class="starRadio star-5" id="star_a-5" value="5"/> 
 
    <label class="star-5" for="star_a-5">5</label> 
 
    
 
    <span></span> 
 
</div> 
 

 
<div class="stars"> 
 
    <input type="radio" name="star_b" class="starRadio star-1" id="star_b-1" value="1"/> 
 
    <label class="star-1" for="star_b-1">1</label> 
 
    
 
    <input type="radio" name="star_b" class="starRadio star-2" id="star_b-2" value="2"/> 
 
    <label class="star-2" for="star_b-2">2</label> 
 
    
 
    <input type="radio" name="star_b" class="starRadio star-3" id="star_b-3" value="3"/> 
 
    <label class="star-3" for="star_b-3">3</label> 
 
    
 
    <input type="radio" name="star_b" class="starRadio star-4" id="star_b-4" value="4"/> 
 
    <label class="star-4" for="star_b-4">4</label> 
 
    
 
    <input type="radio" name="star_b" class="starRadio star-5" id="star_b-5" value="5"/> 
 
    <label class="star-5" for="star_b-5">5</label> 
 
    
 
    <span></span> 
 
</div> 
 

 
<div class="output"></div>

источник

2015-11-07 18:42:22 santi6291

Привет, я новичок в концепции HTML. Как реализовать часть JS в блокноте? я начинаю с ? –

Да, это один из способов сделать это, или вы можете создать новый файл и связать его с вашим html-файлом 'script.js' <- здесь находится код JS, а затем в вашем html-файле: перед тегом' ' '' и я немного отредактировал ответ, обернув его в готовый оператор jQuery – santi6291

Итак, я просто вставляю JS-код непосредственно в блокнот (позже переименован в script.js) без что-нибудь еще? , о котором я упоминаю до. Я отредактировал свой основной пост с кодом при использовании, не могли бы вы проверить его? –

EDIT: В вашем HTML есть ошибка, которую необходимо изменить, чтобы этот код работал. Убедитесь, что value s: не находится рядом с закрывающейся обратной косой чертой (/). Например, измените эту строку:

<input type="radio" name="star_a" class="star-2" id="star_a-2" value=2/> 
                  change this^

Для этого:

<input type="radio" name="star_a" class="star-2" id="star_a-2" value=2 /> 
                   to this^

Вы можете иметь сценарий JavaScript/JQuery, который работает onchange из переключателей, например так:

$("input").change(function() { 
    if($("input[name=star_a]").val() == "1" && $("input[name=star_b]").val() == "1") { 
     var sum = parseInt($("input[name=star_a]:checked").val()) + parseInt($("input[name=star_b]:checked").val()); 
     alert(sum); 
     $("#sum").text(sum); 
    } 
});

См. Рабочий пример: JSFiddle.

источник

2015-11-07 18:28:30

Я новичок в JavaScript. Спасибо за ответ. Мне нужно в основном создать форму обратной связи, основанную на рейтингах. Таким образом, у меня есть классы n-рейтинга, которые мне нужно найти в среднем по сравнению с указанным выше классом и выводят ответ на текстовое поле или тот же тип класса. @Jonathan –

Если вы посмотрите на JSFiddle, он выводит сумму в '', и она сохраняется в переменной JS, которую вы можете использовать. –

Работает отлично на JSFiddle. Но если я выполняю его в своем браузере, ничего не происходит. Я действительно смущен. –

Невозможно добавить значение кнопки радио

ответ

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