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

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> 

所以我想真正做的是，当我点击收音机，跨度类是从变化到btn-dangerbtn-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），但是当我检查另一电台，原来的绿色，但以前的无线电收音机，我点击它，它仍然是绿色（还有btn-success类）。有人能帮我吗？谢谢:)

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

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

你可以通过所有的单选按钮像做

$(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 3

在任何一个单选按钮迭代循环的变化和检查单选按钮是否被选中与否和作出相应的更改父div的类。请参阅下面的代码片段以获得更多理解。

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

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

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