为什么选中的单选按钮的值不更新？

Question

每当我 select 我的 HTML 上的一个新单选按钮时，函数 newChord() 只向控制台输出 1，无论选项如何。例如，如果我 select 编辑了按钮 Advanced 而不是 Beginner，则控制台应该显示 3（通过 JS 关联到 Advanced），但它仍然只显示 1（关联到 Beginner）。这让我相信 if 语句有问题（我知道含糊不清......）但我无法弄清楚为什么它适用于初学者选项，但不适用于其他任何选项。

HTML代码

<div class="difficulty_btn"><br>
          <form>
            <input type="radio" id="beginner_btn" name="difficulty" value="beginner" checked>
            <label for="beginner_btn">Beginner</label>

            <input type="radio" id="intermediate_btn" name="difficulty" value="intermediate">
            <label for="intermediate_btn">Intermediate</label>

            <input type="radio" id="advanced_btn" name="difficulty" value="advanced">
            <label for="advanced_btn">Advanced</label>

            <input type="radio" id="mixed_btn" name="difficulty" value="all">
            <label for="mixed_btn">Mixed</label>

          </form><br>
</div>

Javascript代码

function newChord() {
    
    if ($("input[name='difficulty']:checked").val('beginner')) {
        console.log(1);
        
    } else if ($("input[name='difficulty']:checked").val('intermediate')) {
        console.log(2);

    } else if ($("input[name='difficulty']:checked").val('advanced')) {
        console.log(3);
        
    } else if ($("input[name='difficulty']:checked").val('all')) {
        console.log(4);
    }
}

感谢任何帮助，提前致谢。

Answer 1

这一行

if ($("input[name='difficulty']:checked").val('beginner'))

不是比较选中属性的值，而是分配它。

你可能想要这样的东西：

if ($("input[name='difficulty']:checked").val() == 'beginner') {
    console.log(1);
} else if ($("input[name='difficulty']:checked").val() == 'intermediate') {
    console.log(2);
}
.... and so on

Answer 2

Chris Smith 是对的，但是您可以通过将所选值存储在变量中来改进它。另外你不需要使用else if，使用if就足够了。我用你的代码做了一个片段。我将 change() 事件触发器添加到控制台中的输出值。

$('input:radio[name="difficulty"]').change(function(){
    let checkedValue = $("input[name='difficulty']:checked").val();
    
    if (checkedValue =='beginner'){
        console.log(1);
    } 
    if (checkedValue == 'intermediate'){
        console.log(2);
    } 
    if (checkedValue == 'advanced'){
        console.log(3);
    }
    if (checkedValue == 'all'){
        console.log(4);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="difficulty_btn"><br>
          <form>
            <input type="radio" id="beginner_btn" name="difficulty" value="beginner" checked>
            <label for="beginner_btn">Beginner</label>

            <input type="radio" id="intermediate_btn" name="difficulty" value="intermediate">
            <label for="intermediate_btn">Intermediate</label>

            <input type="radio" id="advanced_btn" name="difficulty" value="advanced">
            <label for="advanced_btn">Advanced</label>

            <input type="radio" id="mixed_btn" name="difficulty" value="all">
            <label for="mixed_btn">Mixed</label>

          </form><br>
</div>

为什么选中的单选按钮的值不更新？

Why is the value of the radio button selected not updating?

javascript

html

radio-button