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
– Rayon, Commented Dec 12, 2015 at 8:41
Use a single checkbox, and code $(document).ready(function (e) { $("#yes").change(function () { $("#companydetials").toggle(this.checked); }); }); — Tushar
– Tushar, Commented Dec 12, 2015 at 8: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
– James Favour, Commented Dec 12, 2015 at 9:10

Shuvro · Accepted Answer · 2015-12-12 09:47:13Z

2

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>

edited Dec 12, 2015 at 9:47

answered Dec 12, 2015 at 9:19

Shuvro

1,4994 gold badges14 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shuvro Over a year ago

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

Neo Over a year ago

@Shuvro: Checkbox code not working. I think this should use radio button for best practice.

Shuvro Over a year ago

@MrNeo edited the html a while ago, forgot to update the js too, fixed it now. Yeah, radio button is the absolute option here.

MakeLoveNotWar · Accepted Answer · 2015-12-12 09:18:02Z

0

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

edited Dec 12, 2015 at 9:18

answered Dec 12, 2015 at 9:03

MakeLoveNotWar

9549 silver badges26 bronze badges

2 Comments

James Favour Over a year ago

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

MakeLoveNotWar Over a year ago

i will make an example with checking out 'yes' when 'no' is clicked

Community · Accepted Answer · 2017-05-23 12:15:48Z

0

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

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Dec 12, 2015 at 9:16

edwardbrosens

1047 bronze badges

Collectives™ on Stack Overflow

How to work with two checkbox using jQuery

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related