Установите флажок в раскрывающемся списке

Question

Я ищу способ автоматической установки флажка, если выбор сделан из выпадающего списка. HTML код выглядит примерно так:

<table> 
    <tr> 
     <td> 
      <input type="checkbox" name="check1" />Process 1:</td> 
     <td> 
      <select id="process1" name="process1"> 
       <option value="null">--Select Process--</option> 
       <option value="NameA">NameA</option> 
       <option value="NameB">NameB</option> 
       <option value="NameC">NameC</option> 
      </select> 
     </td> 
    </tr> 
</table> 

Если возможно, если пользователь возвращается и выбирает --Select Process--, флажок будет снимите

Что бы Javascript код выглядеть для этого?

Answer 1

$(function(){ 
    $('#process1').change(function() { 
     var selected = $('#process1 option:selected'); 
     if (selected.val() == "null") { 
      $('input[name="check1"]').prop('checked', false); 
     } 
     else { 
      $('input[name="check1"]').prop('checked', true); 
     } 
    }); 
}); 

Answer 2

Попробуйте это:

DEMO

JS

function setChk(value){ 
    var chk = document.getElementById('check1'); 
    chk.checked = (value != 'null'); 
} 

HTML

<table> 
    <tr> 
     <td> 
      <input type="checkbox" name="check1" id="check1"/>Process 1:</td> 
     <td> 
      <select id="process1" name="process1" onchange="setChk(this.value);"> 
       <option value="null">--Select Process--</option> 
       <option value="NameA">NameA</option> 
       <option value="NameB">NameB</option> 
       <option value="NameC">NameC</option> 
      </select> 
     </td> 
    </tr> 
</table> 

Answer 3

JQuery будет проще, но в Javascript, попробуйте добавить OnChange ATT ribute на выбор:

onchange="checkValue()" 

Тогда в JavaScript:

function checkValue() { 
    var e = document.getElementById("process1"); 
    var value = e.options[e.selectedIndex].value; 
    if (value == "null") { 
     document.getElementById("check1").checked=false; 
    } else { 
     document.getElementById("check1").checked=true; 
    } 
} 

Просто добавьте идентификатор с флажком ID = "Check1"

Answer 4

This ответ действительно круто!

Но если вы откроете, что будет использовать JQuery, то код будет выглядеть следующим образом:

jQuery(document).ready(function() { 
    jQuery('#process1').on('change', function() { 
     var selectedVal = jQuery(this).find('option:selected').val(), 
      checkbox = jQuery('input[name="check1"]'); 
     if (selectedVal !== 'null') { 
      checkbox.attr('checked', 'checked'); 
     } else { 
      checkbox.removeAttr('checked'); 
     } 
    }); 
}); 

Demo