javascript - 根据输入的输入字段数量显示正确的输入字段数量

Question

我正在尝试安排一个设置，其中根据输入的数量显示与会者输入字段的数量。

示例将始终显示与会者 1 字段，因为它是必填字段。然后，如果用户在数量输入字段中输入“2”，则只会显示与会者 1 和与会者 2，依此类推...参加人数上限为 15 人。

我在这里设置了 html 标记。

<div id="personal-fields">
<label class="personal-field-title">Attendee 1<span class="validate">*</span></label><input class="personal-field-value" name="attendee1" required="" /><p class="not-validated">* This field is required.</p>
<label class="personal-field-title">Attendee 2</label><input class="personal-field-value" name="attendee2" />
<label class="personal-field-title">Attendee 3</label><input class="personal-field-value" name="attendee3" />
<label class="personal-field-title">Attendee 4</label><input class="personal-field-value" name="attendee4" />
<label class="personal-field-title">Attendee 5</label><input class="personal-field-value" name="attendee5" />
<label class="personal-field-title">Attendee 6</label><input class="personal-field-value" name="attendee6" />
<label class="personal-field-title">Attendee 7</label><input class="personal-field-value" name="attendee7" />
<label class="personal-field-title">Attendee 8</label><input class="personal-field-value" name="attendee8" />
<label class="personal-field-title">Attendee 9</label><input class="personal-field-value" name="attendee9" />
<label class="personal-field-title">Attendee 10</label><input class="personal-field-value" name="attendee10" />
<label class="personal-field-title">Attendee 11</label><input class="personal-field-value" name="attendee11" />
<label class="personal-field-title">Attendee 12</label><input class="personal-field-value" name="attendee12" />
<label class="personal-field-title">Attendee 13</label><input class="personal-field-value" name="attendee13" />
<label class="personal-field-title">Attendee 14</label><input class="personal-field-value" name="attendee14" />
<label class="personal-field-title">Attendee 15</label><input class="personal-field-value" name="attendee15" />
</div>

<div class="attributeselection">
<span class="leftselection thumbnail">Qty<input name="ctl00$MainCentre$container$container$Content_31$StyleDetail1$txtQuantity" id="ctl00_MainCentre_container_container_Content_31_StyleDetail1_txtQuantity" value="1" maxlength="5" class="inputqty form-control" autocomplete="off" onkeypress="return NumericText(event);" pattern="[0-9]*" type="text"> 
</span> 
</div>

https://jsfiddle.net/kjy4hdhz/

提前致谢。

Answer 1

这是一种使用 JS 实现的方法。我将您的标签/输入包装在一个元素中，以便它们更容易定位，并添加了一个类来切换 display 属性以隐藏/显示它们。

var field = document.getElementById('ctl00_MainCentre_container_container_Content_31_StyleDetail1_txtQuantity'),
		groups = document.getElementById('personal-fields').getElementsByClassName('group');
    
field.addEventListener('change',function() {
	var val = this.value;
  for (var i = 0; i < groups.length; i++) {
  	if (i < val) {
      groups[i].classList.remove('hidden');
    } else {
    	groups[i].classList.add('hidden');
    }
  }
})

#personal-fields {
		display: inline-block;
		background-color: #f3f3f3;
		border: 1px solid #dfdfdf;
		padding: 20px;
		width: auto;
		margin-top: 20px;
	}
	#personal-fields label{
		font-size: 12px;
		font-family: sans-serif;
		width: 150px;
		display: inline-block;
		font-weight: bold;
	}
	.personal-field-value{
		padding: 8px;
		margin-bottom: 10px;
		width: 220px;
		border: 1px solid #dfdfdf;
		display: block;
	}
	.personal-field-value:hover{
		border: 1px solid #000;
	}
	span.validate{
		color: #d10000;
		vertical-align: top;
	}
	p.not-validated{
		text-align: right;
		font-size: 10px;
		color: #d10000 !important;
		font-family: sans-serif;
		margin: 0 0 10px;
		display: none;
	}
  
  .attributeselection{
    display: inline-block;
    width: 100%;
    margin: 20px 0;
  }
  .attributeselection input{
    padding: 5px;
    border: 1px solid #ccc;
  }
  
  .hidden {
    display: none;
  }

  <div id="personal-fields">
    <div class="group">
    <label class="personal-field-title">Attendee 1<span class="validate">*</span></label><input class="personal-field-value" name="attendee1" required="" /><p class="not-validated">* This field is required.</p>
    </div>
    <div class="group hidden">
           <label class="personal-field-title">Attendee 2</label><input class="personal-field-value" name="attendee2" />

    </div>
    <div class="group hidden">
    	   <label class="personal-field-title">Attendee 3</label><input class="personal-field-value" name="attendee3" />

    </div>
    <div class="group hidden">
    	   <label class="personal-field-title">Attendee 4</label><input class="personal-field-value" name="attendee4" />

    </div>
    <div class="group hidden">
    	   <label class="personal-field-title">Attendee 5</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 6</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 7</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 8</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 9</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 10</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 11</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 12</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 13</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 14</label><input class="personal-field-value" name="attendee5" />

    </div>
<div class="group hidden">
    	   <label class="personal-field-title">Attendee 15</label><input class="personal-field-value" name="attendee5" />

    </div>
       
</div>

<div class="attributeselection">
<span class="leftselection thumbnail"><input name="ctl00$MainCentre$container$container$Content_31$StyleDetail1$txtQuantity" id="ctl00_MainCentre_container_container_Content_31_StyleDetail1_txtQuantity" value="1" maxlength="5" class="inputqty form-control" autocomplete="off" pattern="[0-9]*" type="text"></span> 
         <span class="rightselection thumbnail"><span id="ctl00_MainCentre_container_container_Content_31_StyleDetail1_lblSelection"></span></span> 
      </div>