CODEWITHSUNDEEP
jquerycheckbox
Meek
Meek

Reputation: 3348

jQuery: checkboxes checked, conditional setup

I'm trying to set up some comditions for showing and hiding elements depending on the state of two checkboxes:

My code is below. The checkboxes are the same except for their value. I have trouble with the logic for checking both checkboxes.

HTML:

<form action="">
  <div class="inputfield">
    <label for="">A</label>
    <input type="checkbox" name="xyz" value="A" />
    <label for="">B</label>
    <input type="checkbox" name="xyz" value="B" />
  </div>
</form>

<div class="one">Results for A</div>
<div class="one">Results for A</div>
<div class="two">Results for B</div>

Js:

var a = $(".one");
var b = $(".two");
a.hide();
b.hide();

$(".inputfield input[name='xyz']").change(function() {
  var value = $(this).val();
  if (this.checked) {
    //console.log(value);
    if (value == 'A') {
      a.show();
      b.hide();
    }
    if (value == 'B') {
      a.hide();
      b.show();
    }
    if (value == 'A' && value == 'B') {
      a.show();
      b.show();
    }
  } else {
    a.hide();
    b.hide();
  }
});

JsFiddle here.

Upvotes: 1

Views: 2331

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122057

You can instead use toggle() and is(':checked'). You can use attribute selector to select each input by value attribute and then toggle one and two div's 

var a = $(".one");
var b = $(".two");
a.hide();
b.hide();

$(".inputfield input[name='xyz']").change(function() {
  a.toggle($('input[value="A"]').is(':checked'))
  b.toggle($('input[value="B"]').is(':checked'))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <div class="inputfield">
    <label for="">A</label>
    <input type="checkbox" name="xyz" value="A" />
    <label for="">B</label>
    <input type="checkbox" name="xyz" value="B" />
  </div>
</form>

<div class="one">Results for A</div>
<div class="one">Results for A</div>
<div class="two">Results for B</div>

Upvotes: 1

Dekel
Dekel

Reputation: 62576

  1. You should not have two checkboxes with the same name, but if you have to at least give them different ids.
  2. It's better to check if the checkbox is checked using is(':checked')
  3. Regarding the login - check the example:

var a = $(".one");
var b = $(".two");
a.hide();
b.hide();

$(".inputfield input[name='xyz']").change(function() {
  var A_is_checked = $(".inputfield input[name='xyz']:first").is(':checked');
  var B_is_checked = $(".inputfield input[name='xyz']:last").is(':checked');
  
  if (A_is_checked && B_is_checked) {
      a.show();
      b.show();
  } else if (A_is_checked) {
      a.show();
      b.hide();
  } else if (B_is_checked) {
      a.hide();
      b.show();
  } else {
    a.hide();
    b.hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <div class="inputfield">
    <label for="">A</label>
    <input type="checkbox" name="xyz" value="A" id="A" />
    <label for="">B</label>
    <input type="checkbox" name="xyz" value="B" id="B" />
  </div>
</form>

<div class="one">Results for A</div>
<div class="one">Results for A</div>
<div class="two">Results for B</div>

If you can't change the markup you can select the relevant checkbox by it's value, using:

var A_is_checked = $("input[name='xyz'][value='A']").is(':checked');
var B_is_checked = $("input[name='xyz'][value='B']").is(':checked');

Or by the position in the DOM:

var A_is_checked = $("input[name='xyz']:first").is(':checked');
var B_is_checked = $("input[name='xyz']:last").is(':checked');

Upvotes: 3

Related Questions