Checkbox condition using JavaScript

Question

I need help on JavaScript condition.

Here is my working code:

$(document).on("click", "input[name='txt1']", function() {
  $('#modal1').show();
});

$(document).on("click", "input[name='txt2']", function() {
  $('#modal2').show();
});

$(document).on("click", ".btn1", function() {
  $('#modal1').hide();
});

$(document).on("click", ".btn2", function() {
  $('#modal2').hide();
});

$(".radio").change(function() {
  $(".radio").prop('checked', false);
  $(this).prop('checked', true);
});

/* modal layout */
    .modalwrapper {
        top: 0;
        left: 0;
        opacity: 0;
        position: absolute;
        visibility: hidden;
        box-shadow: 0 3px 7px rgba(0,0,0,.25);
        box-sizing: border-box;
        transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
    }

    .modalwrapper:target {
        opacity: 1;
        visibility: visible
    }

    .overlay {
        background-color: #000;
        background: rgba(0,0,0,.8);
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1;
    }

    .modalcontainer {
        display: table;
        background-color: #777;
        position: relative;
        z-index: 100;
        color: #fff;
        padding: 5px;
    }

    .modalcol1 { display: table-cell; }

    .clear { clear: both; }

    .modalwrapper input[type=checkbox] {
        float: right;
        margin-right: 20px;
    }

    .savebutton input[type=submit] {
        float: right;
        background-color: maroon;
        color: #fff;
        border: none;
        padding: 5px 10px;
        margin-top: 5px;
        margin-right: 20px;
    }
    /* modal layout ends here */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="testform" action="">

  <a href="#modal1">
    <!-- when the input textbox was clicked, modal will pop up -->
    Label 1
    <input readonly type="text" name="txt1" placeholder="inputTest">
  </a>

  <br>
  <br>

  <a href="#modal2">
    <!-- when the input textbox was clicked, modal will pop up -->
    Label 2
    <input readonly type="text" name="txt2" placeholder="inputTest">
  </a>

  <!-- modal starts here -->
  <div class="modalwrapper" id="modal1">
    <!-- modal -->
    <div class="modalcontainer">
      <div class="modalcol1">
        <label>Test 1</label>
        <input type="checkbox" name="test_modal[]" value="1">
        <div class="clear"></div>
        <label>Test 2</label>
        <input type="checkbox" name="test_modal[]" value="2">
        <div class="clear"></div>
        <label>Test 3</label>
        <input type="checkbox" name="test_modal[]" value="3">
        <div class="clear"></div>
        <label>Test 4</label>
        <input type="checkbox" name="test_modal[]" value="4">
        <div class="clear"></div>
        <label>Test 5</label>
        <input type="checkbox" name="test_modal[]" value="5">
        <div class="clear"></div>

        <div class="savebutton">
          <button class="btn1" type="button" value="Submit">Submit</button>
        </div>
      </div>
      <!-- close modalcol1 -->
    </div>
    <!-- close modalcontainer -->
    <div class="overlay"></div>
  </div>
  <!-- close modalwrapper -->


  <div class="modalwrapper" id="modal2">
    <!-- modal -->
    <div class="modalcontainer">
      <div class="modalcol1">
        <label>Mango</label>
        <input class="radio" type="checkbox" name="fruit1" value="1">
        <div class="clear"></div>
        <label>Banna</label>
        <input class="radio" type="checkbox" name="fruit2" value="2">
        <div class="clear"></div>
        <label>Grapes</label>
        <input class="radio" type="checkbox" name="fruit3" value="3">
        <div class="clear"></div>
        <div class="savebutton">
          <button class="btn2" type="button" value="Submit">Submit</button>
        </div>
      </div>
      <!-- close modalcol1 -->
    </div>
    <!-- close modalcontainer -->
    <div class="overlay"></div>
  </div>
  <!-- close modalwrapper -->
</form>

On my Label 1 checkbox, you can have multiple checked. What I want here is that if checkbox checked is greater than 1, it will echo the value Multiple inside my textbox.
Please explain to me how your code works so that I can used in the future.

Barmar · Accepted Answer · 2017-01-20 19:06:26Z

1

You can use .length to get the number of items found by a selector, so you can write:

if ($("#modal1 :checkbox:checked").length > 1) {
    $("input[name=txt1]").val("multiple");
}

$(document).on("click", "input[name='txt1']", function() {
  $('#modal1').show();
});

$(document).on("click", "input[name='txt2']", function() {
  $('#modal2').show();
});

$(document).on("click", ".btn1", function() {
  if ($('#modal1 :checkbox:checked').length > 1) {
    $('input[name=txt1]').val('multiple');
  } else {
    $('input[name=txt1]').val($('#modal1 :checkbox:checked').val());
  }

  $('#modal1').hide();
});

$(document).on("click", ".btn2", function() {
  $('#modal2').hide();
});

$(".radio").change(function() {
  $(".radio").prop('checked', false);
  $(this).prop('checked', true);
});

/* modal layout */

.modalwrapper {
  top: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  visibility: hidden;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
  box-sizing: border-box;
  transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
  opacity: 1;
  visibility: visible
}
.overlay {
  background-color: #000;
  background: rgba(0, 0, 0, .8);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}
.modalcontainer {
  display: table;
  background-color: #777;
  position: relative;
  z-index: 100;
  color: #fff;
  padding: 5px;
}
.modalcol1 {
  display: table-cell;
}
.clear {
  clear: both;
}
.modalwrapper input[type=checkbox] {
  float: right;
  margin-right: 20px;
}
.savebutton input[type=submit] {
  float: right;
  background-color: maroon;
  color: #fff;
  border: none;
  padding: 5px 10px;
  margin-top: 5px;
  margin-right: 20px;
}
/* modal layout ends here */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="testform" action="">

  <a href="#modal1">
    <!-- when the input textbox was clicked, modal will pop up -->
    Label 1
    <input readonly type="text" name="txt1" placeholder="inputTest">
  </a>

  <br>
  <br>

  <a href="#modal2">
    <!-- when the input textbox was clicked, modal will pop up -->
    Label 2
    <input readonly type="text" name="txt2" placeholder="inputTest">
  </a>

  <!-- modal starts here -->
  <div class="modalwrapper" id="modal1">
    <!-- modal -->
    <div class="modalcontainer">
      <div class="modalcol1">
        <label>Test 1</label>
        <input type="checkbox" name="test_modal[]" value="1">
        <div class="clear"></div>
        <label>Test 2</label>
        <input type="checkbox" name="test_modal[]" value="2">
        <div class="clear"></div>
        <label>Test 3</label>
        <input type="checkbox" name="test_modal[]" value="3">
        <div class="clear"></div>
        <label>Test 4</label>
        <input type="checkbox" name="test_modal[]" value="4">
        <div class="clear"></div>
        <label>Test 5</label>
        <input type="checkbox" name="test_modal[]" value="5">
        <div class="clear"></div>

        <div class="savebutton">
          <button class="btn1" type="button" value="Submit">Submit</button>
        </div>
      </div>
      <!-- close modalcol1 -->
    </div>
    <!-- close modalcontainer -->
    <div class="overlay"></div>
  </div>
  <!-- close modalwrapper -->


  <div class="modalwrapper" id="modal2">
    <!-- modal -->
    <div class="modalcontainer">
      <div class="modalcol1">
        <label>Mango</label>
        <input class="radio" type="checkbox" name="fruit1" value="1">
        <div class="clear"></div>
        <label>Banna</label>
        <input class="radio" type="checkbox" name="fruit2" value="2">
        <div class="clear"></div>
        <label>Grapes</label>
        <input class="radio" type="checkbox" name="fruit3" value="3">
        <div class="clear"></div>
        <div class="savebutton">
          <button class="btn2" type="button" value="Submit">Submit</button>
        </div>
      </div>
      <!-- close modalcol1 -->
    </div>
    <!-- close modalcontainer -->
    <div class="overlay"></div>
  </div>
  <!-- close modalwrapper -->
</form>

edited Jan 20, 2017 at 19:06

answered Jan 20, 2017 at 18:33

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

7 Comments

Let Soo Gas Over a year ago

really great! hey sir, is it possible that what i can echo on the textbox is the label instead of the value when i choose 1 checkbox?

Barmar Over a year ago

$('#modal1 :checkbox:checked').prev('label').text()

Let Soo Gas Over a year ago

mate, another question regarding with this. after checking some of the checkbox and then i clicked submit and redirected it to the page itself. the checked checkbox retain there but the text on the textbox was gone. did you get my point? i want the text to also retain there inside the textbox :D

Barmar Over a year ago

You should run the function when the page loads. You could simply put $(".btn").click(); in the code, to act as if the user had clicked on the button.

Let Soo Gas Over a year ago

hi sir, still its not working :( do you have any other solution?

|

Collectives™ on Stack Overflow

Checkbox condition using JavaScript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related