如何知道單選按鈕沒有被選中？

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