Question

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

<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>

所以我真正要做的是，当我点击收音机时，span类从btn-danger变为btn-success。当然，具有btn-success的上一个按钮将再次返回btn-danger。我尝试使用我的javascript代码，但它不会成功。

$(document).ready(function() {
    $("label").click(function() {
        if ($(this).children().children().is(":checked")) {
            $(this).children().attr("class", "btn btn-success");
        } else {
            $(this).children().attr("class", "btn btn-danger");
        }
    });
});

好的，当我点击收音机时，它变为绿色（btn-success），但是当我检查另一个收音机时，它变为绿色，但我点击它的前一个收音机，它仍然是绿色的（仍然有{{ 1}}类）。有人能帮我吗？谢谢:)）

Answer 1

您还需要从unckecked radio的父元素元素中删除/添加正确的CSS类。

此外，.addClass()和.removeClass()可用于添加和删除CSS类。在示例中，我还使用了.filter()

$(document).ready(function() {
  $("label").click(function() {
    //Cache elements    
    var radioElem = $(":radio[name=tipe]");

    //Remove the btn-success and add btn-danger class to all the parent element of radio
    radioElem.parent().removeClass('btn-success').addClass('btn-danger');

    //Filter out checked radio and add/remove the classes
    radioElem.filter(":checked").parent().addClass('btn-success').removeClass('btn-danger');
  });
});

.btn-danger {
  color: red
}
.btn-success {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

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

＆＃13;

$("input[type='radio']").on("change",function(){
  $("input[type='radio']").each(function(){
    if($(this).is(':checked')){
      $(this).parent().removeClass('btn-danger').addClass('btn-success');
    }else{
      $(this).parent().removeClass('btn-success').addClass('btn-danger');
    }
  });
});

＆＃13;

.btn-danger {
  color: red
}
.btn-success {
  color: green
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
    <label for="radio-A">
        <span class="btn btn-danger">
            <input id="radio-A" type="radio" name="tipe" value="str" style="display: none;" /> A
        </span> Strength
    </label>
</div>
<div class="radio">
    <label for="radio-B">
        <span class="btn btn-danger">
            <input id="radio-B" type="radio" name="tipe" value="agi" style="display: none;" /> B
        </span> Agility
    </label>
</div>
<div class="radio">
    <label for="radio-C">
        <span class="btn btn-danger">
            <input id="radio-C" type="radio" name="tipe" value="int" style="display: none;" /> C
        </span> Intelligence
    </label>
</div>

＆＃13;

Answer 3

您只是检查点击按钮的子项并设置或休息该项。但是，您必须重置未单击的按钮的子项，以使其再次变为红色。

您可以执行类似

的操作

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

Answer 4

非常简单

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

Answer 5

试试这段代码，

$(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');
        }
    });
});

谢谢！

Answer 6

您可以使用以下代码替换上面的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');
        }
    });
});

如何知道没有选中单选按钮？

6 个答案: