添加类并在选择时更改单选按钮上的文本

发布于 2024-11-27 01:05:05 字数 1197 浏览 2 评论 0原文

我试图在选择单选按钮后更改其上的文本。我让它工作，所以如果选中单选按钮，我会向父级添加一个类，现在只需要更改父级内跨度文本的部分（我希望文本“选择”更改为“选定”，如果单选按钮被选中）。这是我的代码：

$(document).ready(function(){
    //add the Selected class to the checked radio button
    $('input:checked').parent().addClass("selected");
    //If another radio button is clicked, add the select class, and remove it from the previously selected radio
    $('input').click(function () {
        $('input:not(:checked)').parent().removeClass("selected");
        $('input:checked').parent().addClass("selected");
    });

});
            <td><div class="selectBtn">
                <input type="radio" name="group1" id="one" value="Falcon Air Trust">
                <span class="selectTxt">Select</span></div></td>
            <td><div class="selectBtn">
                <input type="radio" name="group1" value="Atlantic Aviation">
                <span class="selectTxt">Select</span></div></td>
            <td><div class="selectBtn">
                <input type="radio" name="group1" value="Reliance Aviation">
                Select</div></td>

原文

I am trying to change the text on a radio button once it's been selected. I have it working so I add a class to the parent if the radio button is checked, now just need the part to change the text of the span inside the parent (I want the text "Select" to change to "Selected" if the radio button is checked). Here's my code:

$(document).ready(function(){
    //add the Selected class to the checked radio button
    $('input:checked').parent().addClass("selected");
    //If another radio button is clicked, add the select class, and remove it from the previously selected radio
    $('input').click(function () {
        $('input:not(:checked)').parent().removeClass("selected");
        $('input:checked').parent().addClass("selected");
    });

});
            <td><div class="selectBtn">
                <input type="radio" name="group1" id="one" value="Falcon Air Trust">
                <span class="selectTxt">Select</span></div></td>
            <td><div class="selectBtn">
                <input type="radio" name="group1" value="Atlantic Aviation">
                <span class="selectTxt">Select</span></div></td>
            <td><div class="selectBtn">
                <input type="radio" name="group1" value="Reliance Aviation">
                Select</div></td>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

弱骨蛰伏 2024-12-04 01:05:05

试试这个

$(document).ready(function(){
    //add the Selected class to the checked radio button
    $('input:checked').parent().addClass("selected");
    //If another radio button is clicked, add the select class, and remove it from the previously selected radio
    $('input').click(function () {
        $('input:not(:checked)').parent().removeClass("selected").find("span").html("Select");
        $('input:checked').parent().addClass("selected").find("span").html("Selected");
    });

});

Try this

$(document).ready(function(){
    //add the Selected class to the checked radio button
    $('input:checked').parent().addClass("selected");
    //If another radio button is clicked, add the select class, and remove it from the previously selected radio
    $('input').click(function () {
        $('input:not(:checked)').parent().removeClass("selected").find("span").html("Select");
        $('input:checked').parent().addClass("selected").find("span").html("Selected");
    });

});

回复收藏 0 原文