Open textbox on every checkbox click dynamically

Question

I have a list of checkboxes which will repeat themselves from backend... but on frontend I have a list of 4 checkboxes and i want to show a textbox on every checkbox click.

That is if one checkbox is clicked then 1 text box should be shown and if 4 checkboxes are clicked then 4 textboxes should be shown.

I am able to do this if I trigger different event on different text box but that won't work when data is coming anonymously.

This is my html markup:

                        <form>
                            <div class="form-group">
                                <label><strong>Events Hosted</strong><sup class = "venue-imp">*</sup></label>
                                <br />
                                <div class="row">
                                    <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
                                        <div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
                                            <label class="checklist" for="wr">
                        <input type="checkbox" value="" id="wr">Wedding &amp;Reception
                        <span class="checkmark"></span></label>
                                       <div id="yesWR" style="display: none">
                                                <input type="number" id="yesWR" placeholder="Hosted!!" />
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
                                            <label class="checklist" for="weddings">
                        <input type="checkbox" value="" id="weddings">Weddings
                        <span class="checkmark"></span></label>
                                       <div id="yesWed" style="display: none">
                                                <input type="number" id="yesWed" placeholder="Hosted!!" />
                                            </div>

                                        </div>
                                        <div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
                                            <label class="checklist" for="bday">
                        <input type="checkbox" value="" id="bday">Bday Party
                        <span class="checkmark"></span></label>
                                            <div id="yesBday" style="display: none">
                                                <input type="number" id="yesBday" placeholder="Hosted!!" />
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
                                            <label class="checklist" for="anniversary">
                        <input type="checkbox" value="" id="anniversary">Anniversary
                        <span class="checkmark"></span></label>
                                            <div id="yesAnn" style="display: none">
                                                <input type="number" id="yesAnn" placeholder="Hosted!!" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>

and this is the jQuery code

/*anniversary*/
$(function () {
    $("#anniversary").click(function () {
        if ($(this).is(":checked")) {
            $("#yesAnn").show();
        } else {
            $("#yesAnn").hide();
        }
    });
});
/*bday*/
$(function () {
    $("#bday").click(function () {
        if ($(this).is(":checked")) {
            $("#yesBday").show();
        } else {
            $("#yesBday").hide();
        }
    });
});
/*Weddings*/
$(function () {
    $("#weddings").click(function () {
        if ($(this).is(":checked")) {
            $("#yesWed").show();
        } else {
            $("#yesWed").hide();
        }
    });
});
/*Weddings and Reception*/
$(function () {
    $("#wr").click(function () {
        if ($(this).is(":checked")) {
            $("#yesWR").show();
        } else {
            $("#yesWR").hide();
        }
    });
});

now for every checkbox i am performing different event which is not the solution help!!

4b0 · Accepted Answer · 2018-01-17 06:57:59Z

1

Give class on every check box.Use parent and find div to show and hide.No need to repeat your code.

 $(".checkbox").click(function() {
   if ($(this).is(":checked")) {
     $(this).parent().parent().find('div').show();
     //$("#yesAnn").show();
   } else {
     $(this).parent().parent().find('div').hide();
   }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="form-group">
<label><strong>Events Hosted</strong><sup class = "venue-imp">*</sup></label>
<br />
<div class="row">
    <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
        <div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
            <label class="checklist" for="wr">
                    <input type="checkbox" class='checkbox' value="" id="wr">Wedding &amp;Reception
                    <span class="checkmark"></span></label>
            <div id="yesWR" style="display: none">
                <input type="number" id="yesWR" placeholder="Hosted!!" />
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
            <label class="checklist" for="weddings">
                    <input type="checkbox" class='checkbox' value="" id="weddings">Weddings
                    <span class="checkmark"></span></label>
            <div id="yesWed" style="display: none">
                <input type="number" id="yesWed" placeholder="Hosted!!" />
            </div>

        </div>
        <div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
            <label class="checklist" for="bday">
                    <input type="checkbox" class='checkbox' value="" id="bday">Bday Party
                    <span class="checkmark"></span></label>
            <div id="yesBday" style="display: none">
                <input type="number" id="yesBday" placeholder="Hosted!!" />
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
            <label class="checklist" for="anniversary">
                    <input type="checkbox" class='checkbox' value="" id="anniversary">Anniversary
                    <span class="checkmark"></span></label>
            <div id="yesAnn" style="display: none">
                <input type="number" id="yesAnn" placeholder="Hosted!!" />
            </div>
        </div>
    </div>
</div>
</div>

edited Jan 17, 2018 at 6:57

answered Jan 17, 2018 at 6:00

4b0

22.4k30 gold badges97 silver badges143 bronze badges

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

5 Comments

juhi Over a year ago

the problem remains the same i have different data-id for different checkboxes which will definelty show a textbox when clicked but it won't work dynamically as the data-id never change dynamically

4b0 Over a year ago

Use class instead of data-id like my answer.

juhi Over a year ago

where have u used data-id in your jQuery?

juhi Over a year ago

could you send the snippet plz

4b0 Over a year ago

I am not using data-id i am using class instead of data-id.class='checkbox' on every checkbox.See updated answer for 4 check box.

sanatsathyan · Accepted Answer · 2018-01-17 06:02:37Z

Try adding data-id attribute containing the textbox that you need to show in each of your checkbox, so that you can have the textbox anywhere in your form to show, and can handle click with same function to show or hide the textboxes.

/*anniversary*/
$(function() {
  $('input[type="checkbox"]').click(function() {
  var id = $(this).attr("data-id");
    
    if ($(this).is(":checked")) {
      $('#'+id).show();
    } else {
      $('#'+id).hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <label><strong>Events Hosted</strong><sup class="venue-imp">*</sup></label>
    <br />
    <div class="row">
      <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
        <div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
          <label class="checklist" for="wr">
            <input type="checkbox" value="" id="wr" data-id="yesWR">Wedding &amp;Reception
            <span class="checkmark"></span></label>
          <div id="yesWR" style="display: none">
            <input type="number" id="yesWR" placeholder="Hosted!!" />
          </div>
        </div>
        <div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
          <label class="checklist" for="weddings">
            <input type="checkbox" value="" id="weddings" data-id="yesWed">Weddings
            <span class="checkmark"></span></label>
          <div id="yesWed" style="display: none">
            <input type="number" id="yesWed" placeholder="Hosted!!" />
          </div>

        </div>
        <div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
          <label class="checklist" for="bday">
            <input type="checkbox" value="" id="bday" data-id="yesBday">Bday Party
            <span class="checkmark"></span></label>
          <div id="yesBday" style="display: none">
            <input type="number" id="yesBday"  placeholder="Hosted!!" />
          </div>
        </div>
        <div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
          <label class="checklist" for="anniversary">
            <input type="checkbox" value="" id="anniversary" data-id="yesAnn">Anniversary
            <span class="checkmark"></span></label>
          <div id="yesAnn" style="display: none">
            <input type="number" id="yesAnn"  placeholder="Hosted!!" />
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

the problem remains the same i have different data-id for different checkboxes which will definelty show a textbox when clicked but it won't work dynamically as the data-id never change dynamically

Collectives™ on Stack Overflow

Open textbox on every checkbox click dynamically

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related