Fill in the value of the select field using the enabled checkbox

Asked

Viewed 149 times

0

inserir a descrição da imagem aqui

But, it only saves lineatura1 and changes lineatura10, lineatura11 and lineatura12.

inserir a descrição da imagem aqui

This is the current code

Code:

function check_uncheck_checkbox(isChecked, lineatura1) {
  if(isChecked) {
$('input[name="cor1"]').each(function() { 
  this.checked = true;
  $('[name^="lineatura1"]').val(lineatura1);
});
  } else {
$('input[name="cor1"]').each(function() {
  this.checked = false;
  $('[name^="lineatura1"]').val(null);
});
  }

  if(isChecked) {
$('input[name="cor2"]').each(function() { 
  this.checked = true;
  $('[name^="lineatura2"]').val(lineatura2);
});
  } else {
$('input[name="cor2"]').each(function() {
  this.checked = false;
  $('[name^="lineatura2"]').val(null);
});
  }

  if(isChecked) {
$('input[name="cor3"]').each(function() { 
  this.checked = true;
  $('[name^="lineatura3"]').val(lineatura3);
});
  } else {
$('input[name="cor3"]').each(function() {
  this.checked = false;
  $('[name^="lineatura3"]').val(null);
});
  }

  if(isChecked) {
$('input[name="cor4"]').each(function() { 
  this.checked = true;
  $('[name^="lineatura4"]').val(lineatura4);
});
  } else {
$('input[name="cor4"]').each(function() {
  this.checked = false;
  $('[name^="lineatura4"]').val(null);
});
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                                    <div class="span12" style="padding: 1%; margin-left: 0">

                                <legend>Cores Padrão </legend>
                                <input type="checkbox" name="checkall" id="checkall" onClick="check_uncheck_checkbox(this.checked, 52);"/> CMYK</div>
                                </div>
<div id="divCheckAll" class="span12" style="padding: 1%; margin-left: 0">
                                    <div class="span2">
                                        <h4>CYAN</h4>
                                        <img src= "/images/cor-01.jpg"  width="57" height="27">
                                        <input type="checkbox" name="cor1" value="CYAN" />
                                        <label for="lineatura1">Lineatura<span class="required"></span></label>
                                        <select class="span6" name="lineatura1" id="lineatura1" value="">
                                        <option value="">Selecione</option>
                                        <option value="52">52</option>
                                        <option value="42">42</option>
                                        </select>
                                    </div>

                                    <div class="span2">
                                        <h4>MAGENTA</h4>
                                        <img src= "/images/cor-02.jpg"  width="57" height="27">
                                        <input type="checkbox" name="cor2" value="MAGENTA" />
                                        <label for="lineatura2">Lineatura<span class="required"></span></label>
                                        <select class="span6" name="lineatura2" id="lineatura2" value="">
                                        <option value="">Selecione</option>
                                        <option value="52">52</option>
                                        <option value="42">42</option>
                                        </select> 
                                    </div>

                                    <div class="span2">
                                        <h4>YELLOW</h4>
                                        <img src= "/images/cor-03.jpg"  width="57" height="27">
                                        <input type="checkbox" name="cor3" value="YELLOW" />
                                        <label for="lineatura3">Lineatura<span class="required"></span></label>
                                        <select class="span6" name="lineatura3" id="lineatura3" value="">
                                        <option value="">Selecione</option>
                                        <option value="52">52</option>
                                        <option value="42">42</option>
                                        </select> 
                                    </div>
                                    
                                    <div class="span2">
                                        <h4>BLACK</h4>
                                        <img src= "/images/cor-04.jpg"  width="57" height="27">
                                        <input type="checkbox" name="cor4" value="BLACK" />
                                        <label for="lineatura4">Lineatura<span class="required"></span></label>
                                        <select class="span6" name="lineatura4" id="lineatura4" value="">
                                        <option value="">Selecione</option>
                                        <option value="52">52</option>
                                        <option value="42">42</option>
                                        </select>
                                    </div>

  • just set the value of select, ready solved the/

  • I’m a layman. How do I do that ?

  • your doubt does not refer to the PHP language but to javascript ;)

2 answers

0

Just change the html field to the type select. And then create an element with createElement and add to select with appendChild.

function add(value){
  var resultado = document.getElementById('resultado');
  option = document.createElement('option');
  option.textContent = value;
  
  resultado.appendChild(option)
}
<div class="form-group col-md-7">
        <label class="checkbox-inline"><input onclick="add(value)" type="checkbox" value="Laranja">Laranja</label>
        <label class="checkbox-inline"><input onclick="add(value)" type="checkbox" value="Uva">Uva</label>
        <label class="checkbox-inline"><input onclick="add(value)" type="checkbox" value="Banana">Banana</label>
    </div>
    <select id="resultado">
    </select>

  • If values already exist in select, how do ? They are numeric values.

0


The 52 value can be passed by argument if you use the function at another time. How the next names of the select tags should follow the sequence lineatura you can put as per the code below:

function check_uncheck_checkbox(isChecked, lineatura) {
  if(isChecked) {
    $('input[name="language"]').each(function() { 
      this.checked = true;
      $('[name^="lineatura"]').val(lineatura);
    });
  } else {
    $('input[name="language"]').each(function() {
      this.checked = false;
      $('[name^="lineatura"]').val(null);
    });
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="span12" style="padding: 1%; margin-left: 0">
  <legend>Cores Padrão </legend>
  <input type="checkbox" name="checkall" id="checkall" onClick="check_uncheck_checkbox(this.checked, 52);"/>CMYK</div>
</div>
<div id="divCheckAll" class="span12" style="padding: 1%; margin-left: 0">
  <div class="span2">
    <h4>CYAN</h4>
    <img src= "/images/cor-01.jpg"  width="57" height="27">
    <input type="checkbox" name="language" value="CYAN" />
    <label for="lineatura1">Lineatura<span class="required"></span></label>
    <select class="span6" name="lineatura1" id="lineatura1" value="">
    <option value="">Selecione</option>
    <option value="52">52</option>
    <option value="42">42</option>
    </select>
  </div>
</div>

  • I’m gonna ask you another question....

  • Don’t ask another question, change that.

  • Amended Question ;-)

  • Post your HTML code

  • Added code Laércio.

  • See now if it’s OK.

  • Laércio, the commands are working perfectly, but it is not saving in the BD the select fields changed to the value 52. It is empty.

  • Yours works because it only has an entry name="lineatura1". There are 11 more entries being name="lineatura2", name="lineatura3" and name="lineatura4" and so on. To make it work, I had to put the same name="lineaturas" on the four. But, so it doesn’t record right ?

Show 3 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.