Question

＆＃13;

$(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)
    })
});

＆＃13;

<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>
	</div>
     
<span id="sum"></span>
</form>
<script src="script.js">
</body>
</html>

＆＃13;

这是我试图执行的代码。但是我没有在浏览器上运行的HTML代码上得到任何结果。我真的很困惑。代码在小提琴上工作得很好，但我不知道为什么它不能在我的浏览器上工作。

Answer 1

编辑：您的HTML中存在错误，需要更改才能使此代码正常工作。确保value 不在关闭反斜杠（/）旁边。例如，更改此行：

<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 ^

<小时/> 您可以使用运行onchange单选按钮的JavaScript / jQuery脚本，如下所示：

$("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上的工作示例。

Answer 2

让所有收音机都具有相同的类，以便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>

无法添加单选按钮的值

2 个答案: