Javascript 如何知道单选按钮未被选中？

我有一个简单的单选按钮，像这样使用引导

<div class="radio">
    <label>
        <span class="btn btn-danger">
            <input type="radio" name="tipe" value="str" style="display: none;" /> A
        </span> Strength
    </label>
</div>
<div class="radio">
    <label>
        <span class="btn btn-danger">
            <input type="radio" name="tipe" value="agi" style="display: none;" /> B
        </span> Agility
    </label>
</div>
<div class="radio">
    <label>
        <span class="btn btn-danger">
            <input type="radio" name="tipe" value="int" style="display: none;" /> C
        </span> Intelligence
    </label>
</div>

---

好的，当我点击收音机时，它变成绿色（

btn success

），但当我检查另一台收音机时，它变成绿色，但我点击它的前一台收音机，它仍然是绿色（仍然有

btn success

类）。有人能帮我吗？谢谢：）

您还需要从unkecked

radio

的父元素中删除/添加适当的CSS类

也可用于添加和删除CSS类。在本例中，我还使用了

.filter（）

$（文档）.ready（函数（）{
$（“标签”）。单击（函数（）{
//缓存元素
var radioElem=$（“：radio[name=tipe]”）；
//删除btn成功并将btn危险等级添加到无线电的所有父元素
radioElem.parent（）.removeClass（'btn-success'）.addClass（'btn-danger'）；
//过滤出选中的收音机并添加/删除类
radioElem.filter（“：checked”）.parent（）.addClass（'btn-success'）.removeClass（'btn-danger'）；
});
});
.btn危险{
颜色：红色
}
.btn成功{
颜色：绿色
}

A.
力量
B
敏捷性
C
智力
您还需要从unkecked
radio
的父元素中删除/添加适当的CSS类

也可用于添加和删除CSS类。在本例中，我还使用了
.filter（）


$（文档）.ready（函数（）{
$（“标签”）。单击（函数（）{
//缓存元素
var radioElem=$（“：radio[name=tipe]”）；
//删除btn成功并将btn危险等级添加到无线电的所有父元素
radioElem.parent（）.removeClass（'btn-success'）.addClass（'btn-danger'）；
//过滤出选中的收音机并添加/删除类
radioElem.filter（“：checked”）.parent（）.addClass（'btn-success'）.removeClass（'btn-danger'）；
});
});
.btn危险{
颜色：红色
}
.btn成功{
颜色：绿色
}

A.
力量
B
敏捷性
C
智力
您只需检查单击按钮的子项，然后设置或停止该按钮。但您必须重置尚未单击的按钮的子项，以便使它们再次变为红色

你可以这样做

$(document).ready(function() {
    $("label").click(function() {
        $("label").children().attr("class", "btn btn-danger"); // reset all
        $(this).children().attr("class", "btn btn-success"); // set current
    });
});

您只检查单击按钮的子项，并设置或停止该按钮。但您必须重置尚未单击的按钮的子项，以便使它们再次变为红色

你可以这样做

$(document).ready(function() {
    $("label").click(function() {
        $("label").children().attr("class", "btn btn-danger"); // reset all
        $(this).children().attr("class", "btn btn-success"); // set current
    });
});

更改任何单选按钮时，循环遍历所有单选按钮，检查是否选中该单选按钮，并相应地更改父div的类。请参阅下面的代码片段以了解更多信息


$（“input[type='radio']）。在（“change”，function（）上{
$（“输入[type='radio']”）。每个（函数（）{
如果（$（this）.is（':checked'））{
$（this）.parent（）.removeClass（'btn-danger'）.addClass（'btn-success'）；
}否则{
$（this）.parent（）.removeClass（'btn-success'）.addClass（'btn-danger'）；
}
});
});
.btn危险{
颜色：红色
}
.btn成功{
颜色：绿色
}

A.
力量
B
敏捷性
C
智力
更改任何单选按钮时，循环遍历所有单选按钮，检查是否选中该单选按钮，并相应地更改父div的类。请参阅下面的代码片段以了解更多信息


$（“input[type='radio']）。在（“change”，function（）上{
$（“输入[type='radio']”）。每个（函数（）{
如果（$（this）.is（':checked'））{
$（this）.parent（）.removeClass（'btn-danger'）.addClass（'btn-success'）；
}否则{
$（this）.parent（）.removeClass（'btn-success'）.addClass（'btn-danger'）；
}
});
});
.btn危险{
颜色：红色
}
.btn成功{
颜色：绿色
}

A.
力量
B
敏捷性
C
智力
这很简单

if(!$('[name="tipe"][value="str"]').is(':checked')) { 
    alert("it's not checked"); 
} 

这很简单

if(!$('[name="tipe"][value="str"]').is(':checked')) { 
    alert("it's not checked"); 
} 

试试这个代码

$(document).ready(function() {
    $('label').click(function() {
      $('label').find('span').attr('class','btn btn-danger');
        if ($(this).find('input:checked')) {
            $(this).find('span').attr('class','btn btn-success');
        }
    });
});

谢谢
 试试这个代码

$(document).ready(function() {
    $('label').click(function() {
      $('label').find('span').attr('class','btn btn-danger');
        if ($(this).find('input:checked')) {
            $(this).find('span').attr('class','btn btn-success');
        }
    });
});

谢谢
 您可以将上面的jQuery代码替换为下面的代码

$(document).ready(function() {
    $("label").click(function() {
        if ($(this).find('input[type="radio"]').is(':checked')) {
            $(this).children('span').removeClass('btn btn-danger').addClass('btn btn-success');
        } else {
            $('label').children('span').removeClass('btn btn-success').addClass('btn btn-danger');
        }
    });
});

您可以将上面的jQuery代码替换为下面的代码

$(document).ready(function() {
    $("label").click(function() {
        if ($(this).find('input[type="radio"]').is(':checked')) {
            $(this).children('span').removeClass('btn btn-danger').addClass('btn btn-success');
        } else {
            $('label').children('span').removeClass('btn btn-success').addClass('btn btn-danger');
        }
    });
});

无需使用
each（）
即可实现此功能。无需使用
each（）
即可实现此功能！谢谢你的回答，先生：）很好用！谢谢你的回答，先生：）