在每个复选框上打开文本框动态单击

时间：2018-01-17 05:40:54

标签： jquery html

我有一个复选框列表，会从后端重复... 但是在前端我有一个4个复选框的列表，我想在每个复选框点击时显示一个文本框。

即如果单击一个复选框，则应显示1个文本框，如果单击4个复选框，则应显示4个文本框。

如果我在不同的文本框中触发不同的事件，但是当数据匿名发送时，我无法执行此操作。

这是我的html标记：

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

这是jQuery代码

/*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();
        }
    });
});

现在对于每个复选框我正在执行不同的事件，这不是解决方案 帮助!!

2 个答案:

答案 0 :(得分：1)

在每个class上提供check box。使用parent和find div来显示和隐藏。无需重复您的代码。

 $(".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>

答案 1 :(得分：0)

尝试添加包含您需要在每个复选框中显示的文本框的data-id属性，以便您可以在表单中的任何位置显示文本框，并且可以处理具有相同功能的单击以显示或隐藏文本框

＆＃13;
＆＃13; 
/*anniversary*/
$(function() {
  $('input[type="checkbox"]').click(function() {
  var id = $(this).attr("data-id");
    
    if ($(this).is(":checked")) {
      $('#'+id).show();
    } else {
      $('#'+id).hide();
    }
  });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题