CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
imbagila
imbagila

Reputation: 513

How to know that radio button is not checked?

I have simple radio button, using bootstrap like this

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

So what i want really to do is, when i click the radio, the span class is change from btn-danger into btn-success. Of course previous button that has btn-success is would be back into btn-danger again. I try with my javascript code but it wouldn't work out.

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

Ok when I click the radio it turned in to green (btn-success), but when i check another radio, it turned in to green but previous radio which i click it, it still green (still has btn-success class). Can someone help me? Thanks :)

Upvotes: 0

Views: 107

Answers (6)

Praneeta Pakwane
Praneeta Pakwane

Reputation: 1

You can just replace above jQuery code with below code

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

Upvotes: -1

lokesh-coder
lokesh-coder

Reputation: 411

Try this code,

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

Thanks!

Upvotes: 0

Haresh Vidja
Haresh Vidja

Reputation: 8496

It is very simple

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

Upvotes: 0

Rahul Patel
Rahul Patel

Reputation: 5244

On change of any radio button iterate loop through all the radio buttons and check whether the radio button is checked or not and accordingly made change the classes of the parent div. Please refer the below snippet for more understanding.

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

Upvotes: 1

Oliver Gebert
Oliver Gebert

Reputation: 1176

You are only checking the children of the clicked button and set or rest that one. But you have to reset the children of the buttons that have not been clicked in order to make them red again.

You could do something like

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

Upvotes: 0

Satpal
Satpal

Reputation: 133453

You also need to remove/add the proper CSS class from unckecked radio's parent element element.

Also .addClass() and .removeClass() can be used to add and remove the CSS class. Here in the example I have also used .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>

Upvotes: 3

Related Questions