ドロップダウンに基づくチェックボックスのチェック

Question

ドロップダウン選択の値に基づいて特定のボックスを自動的にチェックする方法があるのだろうかと思っていました。私は永遠に検索しているだけで、ドロップダウンに基づいてチェックボックスを表示または非表示にする方法を見つけるように見えるかもしれませんが、それは私が探しているものではありません。

Answer 1

これはかなり簡単にjQueryで行うことができます。このコードは、ドロップダウンからの変更イベントをid="dropdown"でリッスンし、ドロップダウンテキストが 'foo'の場合は、チェックボックスにid="checkbox"をチェックします。

$("#dropdown").change(function() { 
    if($('#dropdown :selected').text() === 'foo') $('#checkbox').prop('checked', true); 
}); 

あなたが選択が再び変更されたときに、このようなものが良いかもしれない]チェックボックスをオフにしたい場合：

$("#dropdown").change(function() { 
    var text = $('#dropdown :selected').text(); 
    $('#checkbox').prop('checked', text === 'foo'); 
}); 

Fiddle

Answer 2

これは、あなたが求めているものを行う必要があります。それが役に立てば幸い！

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

<table> 
 
    <tr> 
 
     <td> 
 
      <input type="checkbox" name="check1" id="check1"/>Test 1:</td> 
 
     <td> 
 
      <select id="process1" onchange="setCheckBox(this.value);"> 
 
       <option value="null">--Select Option--</option> 
 
       <option value="OptionA">Option A</option> 
 
       <option value="OptionB">Option B</option> 
 
       <option value="OptionB">Option C</option> 
 
      </select> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 3

なく、あなたの細目の確認が、これは、あなたが尋ねた、あなたのタスクを完了するために、それから部品を取ることができるはず何が。

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

<select id='changer'> 
 
    <option>None</option> 
 
    <option value='a'>A</option> 
 
    <option value='b'>B</option> 
 
    <option value='c'>C</option> 
 
    <option value='d'>D</option> 
 
</select> 
 
<br /> 
 
<input type='checkbox' id='a' /><label for='a'>A</label><br /> 
 
<input type='checkbox' id='b' /><label for='a'>B</label><br /> 
 
<input type='checkbox' id='c' /><label for='a'>C</label><br /> 
 
<input type='checkbox' id='d' /><label for='a'>D</label>