CODEWITHSUNDEEP
jquerybuttonradio-buttonchecked
pdnb
pdnb

Reputation: 1

jQuery - checked radio button

jQuery isnt my strong side :-) i have no idea how to add to my function new feature .I want to show hided div in html when radio value is checked. Now script show div when i click on radio button:

<script type="text/javascript">
    $(document).ready(function(){
      $('input[type="radio"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".box").not(targetBox).hide();
        $(targetBox).show();
      });
    });
</script>

Upvotes: 0

Views: 814

Answers (2)

pdnb
pdnb

Reputation: 1

Your suggestion doesnt work check snippet bellow .Checked was mark but it doesnt show DIV -you must click on it 

    $(document).ready(function(){
      $('input[type="radio"]').click(function(){
        if( $(this).prop("checked") ) {
            var inputValue = $(this).attr("value");
            var targetBox = $("." + inputValue);
            $(".box").not(targetBox).hide();
            $(targetBox).show();
  	    }
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
AA - <input type="radio" name="test" value="aa" checked="checked"/><br>
BB - <input type="radio" name="test" value="bb" /><br>
CC - <input type="radio" name="test" value="cc" /><br>

<div class="box aa" style="display: none">BOX AA</div>
<div class="box bb" style="display: none">BOX BB</div>
<div class="box cc" style="display: none">BOX CC</div>

Upvotes: 0

Nebojsa Nebojsa
Nebojsa Nebojsa

Reputation: 1459

Is radio button checked or not you can check with this 

if( $(".radio").prop("checked") ) {
    /*means that is checked*/
}

See this code snippet below

    $(document).ready(function(){
      $('input[type="radio"]').click(function(){
        if( $(this).prop("checked") ) {
            var inputValue = $(this).attr("value");
            var targetBox = $("." + inputValue);
            $(".box").not(targetBox).hide();
            $(targetBox).show();
  	    }
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
AA - <input type="radio" name="test" value="aa" /><br>
BB - <input type="radio" name="test" value="bb" /><br>
CC - <input type="radio" name="test" value="cc" /><br>

<div class="box aa" style="display: none">BOX AA</div>
<div class="box bb" style="display: none">BOX BB</div>
<div class="box cc" style="display: none">BOX CC</div>

Upvotes: 1

Related Questions