javascript - 当单选值 ="No"且两个单选都未被选择时，jQuery 识别页面加载时单选按钮的不正确状态

Question

我在页面上有单选按钮，可以根据其他元素的状态添加或删除 css 类。

类testclass默认添加到元素slave(即页面加载的HTML是:

<input type="radio" value="No" name="master" /> No
<input type="radio" value="Yes" name="master" /> Yes

<input type="text" name="a" id="slave" class="testclass" />

如果选择“否”单选，以下 jQuery 将删除该类

$("input[name$='master']").change(function(){
    if(this.value === 'No') {
          $('#slave').removeClass('testclass'); 
    } else {
         $('#slave').addClass('testclass');
    }
}); $("input[name$='master']").filter(':checked').change()

这在页面加载后在状态之间来回移动方面效果很好，但我在页面加载时触发该函数，并且在没有检查时删除当时的类 radio 被选中。 (如果选中"is"则加载即可)。

有趣的是，如果我反转条件，需要"is"才能删除该类(页面加载时类仍然存在)，也可以。

我认为 javascript 可能会将没有选择的值等同于“否”，因此我尝试了严格相等，但没有区别。

有什么想法吗？

Answer 1

我开发了一个 fiddle 供您考虑。这是它的链接 => http://jsfiddle.net/6c7F2/

我认为回答这个问题的最好方法是让您了解有关您在此处提供的代码的一些信息。我要写评论。

$( document ).ready(function(){ // this function is called once your page loads
    $("input[name$='master']").change(function(){
        //this function is not called until you click the radio buttons. 
        // Be careful to note that this function is never called on page load. 
        // You can test it in the fiddle I created
        if(this.value === 'No') {
            $('#slave').removeClass('testclass'); 
            // this alert in the fiddle is called only
            // when you click the radio buttons. Not on page load
            alert("It entered");
        } else {
            $('#slave').addClass('testclass');
        }
    }); 
    $("input[name$='master']").filter(':checked').change()
});

因此，请确保您想要在页面加载时执行的操作和检查应该超出 $("input[name$='master']").change(function(){}) 的范围;

这仅在您单击单选按钮时触发，而不是在页面加载时触发。