无法添加单选按钮的值

Cannot add value of radio button

本文关键字：单选按钮 添加      更新时间：2023-09-26

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

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

  • 让所有的收音机都有相同的类，这样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>

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上的一个工作示例。

相关文章：