Check box is not changing according to radio button value

Question

I have web application with 2 radio buttons and 1 check box

Scenario : According to the radio button value, it should change check box checked status.

Html code

                <div class="form-group">
                  <label>Is Main Meal</label>
                  <div class="radio">
                    <label>
                      <input type="radio" name="inputMeal" value="1" checked> Main Meal
                    </label>
                  </div>
                  <div class="radio">
                    <label>
                      <input type="radio" name="inputMeal" value="0"> Sub Meal
                    </label>
                  </div>
                </div>


                <div class="form-group">
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" name="chkIsPricing"> Is Pricing
                        </label>
                      </div>
                    </div>

Jquery Code

 $('input[name="inputMeal"]').on('change', function () {
        var val = $("input[name='inputMeal']:checked").val();
        if (val == "0") {
            $('input[name="chkIsPricing"]').attr('checked', true);
        } else {
            $('input[name="chkIsPricing"]').attr('checked', false);
        }
    });

This works well in first 2 clicks.

Step 1 : Click "sub meal" radio button and check box is set to checked status. (Success)

Step 2 : Click "main meal" radio button and check box is set to un-checked status (Success)

Step 3 : once again click "sub meal" radio button and check box remain as un-checked status. (Failed)

Whenever I click both radio buttons time to time, the check box remain as un-checked status. May I know where is the issue in my code? What I wonder is, in first two clicks (change the radio button) gives success scenario and after that check box is not changing according to the radio button value.

Additional Info

jQuery-2.1.4
HTML5

Possible duplicate of [Setting "checked" for a checkbox with jQuery?](https://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery) — Sully, May 12 '18 at 07:00

score 2 · Answer 1 · answered May 12 '18 at 06:47

Use prop instead of attr

$('input[name="inputMeal"]').on('change', function () {
    var val = $("input[name='inputMeal']:checked").val();
    if (val == false) {
        $('input[name="chkIsPricing"]').prop('checked', true);
    } else {
        $('input[name="chkIsPricing"]').prop('checked', false);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
   <label>Is Main Meal</label>
   <div class="radio">
      <label>
      <input type="radio" name="inputMeal" value="1" checked> Main Meal
      </label>
   </div>
   <div class="radio">
      <label>
      <input type="radio" name="inputMeal" value="0"> Sub Meal
      </label>
   </div>
</div>
<div class="form-group">
   <div class="checkbox">
      <label>
      <input type="checkbox" name="chkIsPricing"> Is Pricing
      </label>
   </div>
</div>

Thanks dhaval. Actually What I wonder is, how "attr" worked for first 2 times? — weeraa, May 12 '18 at 06:52
i don't know the proper reason,But i found similar issue on the another post that says attr is deprecated. https://stackoverflow.com/questions/15266533/jquery-attrchecked-checked-works-only-once/40082631#comment21534994_15266533 — Dhaval Pankhaniya, May 12 '18 at 07:02

score 1 · Answer 2 · answered May 12 '18 at 06:51

Here is another implementation:

$("input[type=radio][name='inputMeal']").on("change", function() {
     switch($(this).val()) {
         case '0':
             $('input[name="chkIsPricing"]').prop('checked', true);
             break;
         case '1':
             $('input[name="chkIsPricing"]').prop('checked', false);
             break;
     }
});

score 1 · Answer 3 · answered May 12 '18 at 06:54

With .attr() you set the value of an attribute in the DOM tree. Depending on the browser, browser version and jQuery version (especially 1.6), this does not always have the desired effect.

With .prop(), you manipulate the property (in this case, 'checked state'). I strongly recommend using .prop() in your case, so the following will toggle correctly:

$('input[name="chkIsPricing"]').prop('checked', true);

JsFiddle: https://jsfiddle.net/c7qn4k9g/1/

For further information, please refer to the documentation of .prop().

jvk · Answer 4 · 2018-05-12T07:26:51.413

     //Onchange function
     $('input[type="radio"]').bind('change', function(){
    if($(this).val()==0){
     $('input[type="checkbox"]').prop('checked', false);
    }else{
     $('input[type="checkbox"]').prop('checked', true);
    }
   })
      //onload function
   var inputMeal = $('input[type="radio"]:checked').val();
   if(inputMeal==1){
    $('input[type="checkbox"]').prop('checked', true);
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
                  <label>Is Main Meal</label>
                  <div class="radio">
                    <label>
                      <input type="radio"  name="inputMeal" value="1" checked> Main Meal
                    </label>
                  </div>
                  <div class="radio">
                    <label>
                      <input type="radio" name="inputMeal" value="0" > Sub Meal
                    </label>
                  </div>
                </div>


                <div class="form-group">
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" name="chkIsPricing"> Is Pricing
                        </label>
                      </div>
                    </div>

Check box is not changing according to radio button value

4 Answers4