Блог

Главная - Вопросы по программированию - выберите выпадающее значение, которое устанавливает флажок и заполняет ввод

выберите выпадающее значение, которое устанавливает флажок и заполняет ввод

#javascript #jquery

#javascript #jquery

Вопрос:

Желаемое поведение:

1.Выберите «сладости» для поля1

  1. это будет предварительно проверять значения, которые имеют то же значение, что и предварительно выбранное поле1
  2. если флажок установлен, он должен вызвать поле ввода для распечатки строк, которые были отмечены, например. если значение «a» установлено, то во входных данных должно отображаться «a»
  3. если в поле 1 установлено значение «сладости», то поле 3 будет заполнено значением

У меня все работает, кроме пункта 3. если я сам не проверю элементы, они будут отображаться во входных данных. Я не могу жестко закодировать какое-либо из значений, потому что значения будут вводиться динамически.

Ниже у меня есть рабочий пример:

https://jsfiddle.net/kfb4nc03

 document.getElementById('field1').onchange = function() {
  var boxes = document.querySelectorAll('input[type="checkbox"]');
  for (var i = 0; i < boxes.length; i  ) {
    boxes[i].checked = boxes[i].value == this.value;

    $checks = $(":checkbox");
    $checks.on('change', function() {
      var string = $checks.filter(":checked").map(function(i, v) {
        return this.value;
      }).get().join(" ,");
      $('#field_results').val(string);
    });


    document.getElementById("field3").value = this.value;
  }
}; 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name='field1' id="field1">

  <option value="1">Fruits</option>
  <option value="2">Vegetables</option>
  <option value="3">Sweets</option>
  <option value="4">Meat</option>
</select>


<div id='changer'>

  <input type='checkbox' id='a' value="3" /><label>A</label><br />
  <input type='checkbox' id='b' value="3" /><label>B</label><br />
  <input type='checkbox' id='c' value="3" /><label>C</label><br />
  <input type='checkbox' id='d' value="3" /><label>D</label>
</div>

<input type="text" id="field_results" /><br>


<select name='field3' id="field3">

  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

Ответ №1:

Вам нужно перейти к событию out of change $checks.on('change', function() {}) при этой функции проверенное значение все еще не работает и измените на this.id вместо this.value , если вы хотите отобразить a, b, c, d.

 document.getElementById('field1').onchange = function() {
  var boxes = document.querySelectorAll('input[type="checkbox"]');
  for (var i = 0; i < boxes.length; i  ) {
    boxes[i].checked = boxes[i].value == this.value;

    $checks = $(":checkbox");
    $checks.on('change', function() {
      
    });

    var string = $checks.filter(":checked").map(function(i, v) {
        return $(this).next("label").html();
        //return this.id;
      }).get().join(" ,");
      
      $('#field_results').val(string);

    document.getElementById("field3").value = this.value;
  }
}; 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name='field1' id="field1">

  <option value="1">Fruits</option>
  <option value="2">Vegetables</option>
  <option value="3">Sweets</option>
  <option value="4">Meat</option>
</select>


<div id='changer'>

  <input type='checkbox' id='a' value="3" /><label>A</label><br />
  <input type='checkbox' id='b' value="3" /><label>B</label><br />
  <input type='checkbox' id='c' value="3" /><label>C</label><br />
  <input type='checkbox' id='d' value="3" /><label>D</label>
</div>

<input type="text" id="field_results" /><br>


<select name='field3' id="field3">

  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

Комментарии:

1. Привет, это работает действительно здорово. что, если я захочу использовать текст?

2. вы можете использовать $(this).next(«label»).html(), я обновил ответ

3. эй, хейн отлично поработал над моим примером скрипки, но он не работает в моем коде, я получаю эту ошибку: Uncaught TypeError: this.html это не функция

4. я вижу свою проблему, поскольку у меня есть флажок aspx, он сформирован немного по-другому: <div class=»checkbox»><label for=»field2″><input id=»field2″ type=»checkbox» name=»field2″ value=»1″> a</label> </ div> мне нужно: $(this).next(«ввод»).next(«метка»).html()

5. вы не должны переносить входной тег внутри тега label

Ответ №2:

Вам необходимо отделить обработчик событий для флажков от обработчика событий для выпадающих списков. Кроме того, вы должны стараться либо использовать jquery, либо не использовать jquery.

 var $checks = $(":checkbox");

document.getElementById('field1').onchange = function() {
  var boxes = document.querySelectorAll('input[type="checkbox"]');
  for (var i = 0; i < boxes.length; i  ) {
    boxes[i].checked = boxes[i].value == this.value;
    $checks.change();
    document.getElementById("field3").value = this.value;
  }
};

$checks.on('change', function() {
  var string = $checks.filter(":checked").map(function(i, v) {
    return this.value;
  }).get().join(" ,");
  $('#field_results').val(string);
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name='field1' id="field1">

  <option value="1">Fruits</option>
  <option value="2">Vegetables</option>
  <option value="3">Sweets</option>
  <option value="4">Meat</option>
</select>


<div id='changer'>

  <input type='checkbox' id='a' value="3" /><label>A</label><br />
  <input type='checkbox' id='b' value="3" /><label>B</label><br />
  <input type='checkbox' id='c' value="3" /><label>C</label><br />
  <input type='checkbox' id='d' value="3" /><label>D</label>
</div>

<input type="text" id="field_results" /><br>


<select name='field3' id="field3">

  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

Ответ №3:

Что вам нужно, так это

 return $(this).next('label').text();

У вас две проблемы

1) ваше oncheck событие должно быть вне события on-change

2) ваша метка находится вне флажка, поэтому, если вы хотите получить ее текст, вам нужно получить с помощью next или closest .

 document.getElementById('field1').onchange = function() {
  var boxes = document.querySelectorAll('input[type="checkbox"]');
  for (var i = 0; i < boxes.length; i  ) {
    boxes[i].checked = boxes[i].value == this.value;   

    document.getElementById("field3").value = this.value;
  }
};

 $(":checkbox").on('change', function() {    
      var string = $(":checkbox").filter(":checked").map(function(i, v) {
        return $(this).next('label').text();
      }).get().join(" ,");
      $('#field_results').val(string);
    }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name='field1' id="field1">

  <option value="1">Fruits</option>
  <option value="2">Vegetables</option>
  <option value="3">Sweets</option>
  <option value="4">Meat</option>
</select>


<div id='changer'>

  <input type='checkbox' id='a' value="3" /><label>A</label><br />
  <input type='checkbox' id='b' value="3" /><label>B</label><br />
  <input type='checkbox' id='c' value="3" /><label>C</label><br />
  <input type='checkbox' id='d' value="3" /><label>D</label>
</div>

<input type="text" id="field_results" /><br>


<select name='field3' id="field3">

  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
Метки: ,