How to work with two checkbox using jQuery

Question

I want to show a div which contains company details inputs and if a user check the input YES then show div and if a user check the input NO then hide div.

I have written some first code for the input checkbox YES and it working fine but if input NO is check the div is still there of which i want to hide it and uncheck the YES input checkbox.

somebody help me modify the script.

JavaScript:

$(document).ready(function (e) {
    $("#yes").click(function () {
        if($(this).is(":checked")) {
            $("#companydetials").show();
        } else {
            $("#companydetials").hide();
        }
    })
});

HTML:

<p>Do you have a company?
    <input name="comorno" type="checkbox" id="yes" form="signupform"> Yes
    <input type="checkbox" name="comorno" id="no">No</p>

Radio button should be used in this case...Also not that you must play with `change` event not `click` event.. — Rayon, Dec 12 '15 at 08:41
Use a **single** checkbox, and **code** `$(document).ready(function (e) { $("#yes").change(function () { $("#companydetials").toggle(this.checked); }); });` — Tushar, Dec 12 '15 at 08:42
Thank you but my code works like yours. I want to have two checkbox , one with NO id and one with Yes id. if Yes is checked show div and if No is checked hive dive and only one should be checked. can you help with that? — James Favour, Dec 12 '15 at 09:10

Shuvro · Accepted Answer · 2015-12-12T09:47:13.190

You need radio button for what you want. Try the following code.

$(document).ready(function (e) {
    $("input[name=comorno]").change(function () {
        if($(this).is("#yes")) {
            $("#companydetials").show();
        } else {
            $("#companydetials").hide();
        }
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Do you have a company?
    <input name="comorno" type="radio" id="yes" value="" form="signupform" checked> Yes
    <input type="radio" name="comorno" id="no">No</p>

<div id="companydetials">
  
  Company Details Here
  
</div>

Or if using checkbox is a necessity for you in this case you can do it this way -

$(document).ready(function (e) {
        $("input[name^=comorno]").change(function () {
            if($(this).is("#yes")) {
                $("#companydetials").show();
              $("#no").prop("checked", false);
            } else {
                $("#companydetials").hide();              
               $("#yes").prop("checked", false);
            }
        })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <p>Do you have a company?
        <input name="comorno[]" type="checkbox" id="yes" value="" form="signupform" checked> Yes
        <input name="comorno[]" type="checkbox" id="no">No</p>

    <div id="companydetials">
      
      Company Details Here
      
    </div>

@JamesFavour You are welcome. And one thing to remember, in case of checkbox you can not have the same name, which is why you need radio button. But if you want to use checkbox the name should be like comorno[] which will hold all the checked checkbox values during post. Happy coding. — Shuvro, Dec 12 '15 at 09:30
@Shuvro: Checkbox code not working. I think this should use radio button for best practice. — Neo, Dec 12 '15 at 09:31
@MrNeo edited the html a while ago, forgot to update the js too, fixed it now. Yeah, radio button is the absolute option here. — Shuvro, Dec 12 '15 at 09:48

MakeLoveNotWar · Answer 2 · 2015-12-12T09:18:02.547

Check this jsfiddle example - http://jsfiddle.net/ko64a3a8/

<input name="check_status" type="checkbox" class="mycheckbox" value="yes"/>
<div id="myDiv">text</div>

<script>
$(function(){
  $('.mycheckbox').change(function(){
    if($(this).is(':checked')){
      $('#myDiv').show();
    }else{
      $('#myDiv').hide();
    }
  })
});
</script>

Or if you want 'yes' and 'no' options

 <label for="statYes">Yes</label>
 <input name="check_status" id="statYes" type="checkbox" class="mycheckbox" value="yes"/>
 <label for="statNo">No</label>
 <input name="check_status" id="statNo" type="checkbox" class="mycheckbox" value="no"/>

 <div id="myDiv">text</div>

<script>
$(function(){
  $('#myDiv').hide();
  $('.mycheckbox').change(function(){
    if($(this).is(':checked')){
      if($(this).val() == 'yes') {
        $('#statNo').removeAttr('checked');
        $('#myDiv').show();
      }else{
        $('#statYes').removeAttr('checked');
        $('#myDiv').hide();
      }
    }
 })
});
</script>

UPD: Here is the example http://jsfiddle.net/3L3b580h/ When you click 'yes' it shows the div and unchecks the 'no' (if it checked) and backwards

Thank you but my code works like yours. I want to have two checkbox , one with NO id and one with Yes id. if Yes is checked show div and if No is checked hive dive and only one should be checked. can you help with that? @Manchary Manchaary — James Favour, Dec 12 '15 at 09:09
i will make an example with checking out 'yes' when 'no' is clicked — MakeLoveNotWar, Dec 12 '15 at 09:15

score 0 · Answer 3 · edited May 23 '17 at 12:15

$(document).ready(function (e) {
  $('input[name="comorno"]').each(function()
    {
      $(this).change(function()
       {
          $('input[name="comorno"]').prop('checked',false);
          $(this).prop('checked',true);

          if($('#yes').is(':checked')) {
            $('#companydetails').show()
          } else {
            $('#companydetails').hide()
          }
       });
    });
});

Checkout this topic: make checkbox behave like radio buttons with javascript

Fiddle: http://jsfiddle.net/ojensc2y/

How to work with two checkbox using jQuery

3 Answers3