2013-02-21 3 views
0

드롭 다운에서 선택을하면 자동으로 체크 박스를 체크하는 방법을 찾고 있습니다. 사용자가 다시 가서 --Select Process-- 선택하면 체크 박스는드롭 다운 선택의 체크 박스를 선택하십시오.

의 선택을 취소 것, 가능하면

<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> 

어떤 것이에 대한 같은 자바 스크립트 코드 조회 : HTML 코드는 다음과 같이 보인다?

답변

2
$(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); 
     } 
    }); 
}); 
+0

은 데이터베이스의 값에 대해 확인하는 논리의이 같은 유형을 사용할 수 있습니까? 내 드롭 다운 목록은 db의 범주로 채워지며 범주 값에 따라 그리드의 하나 이상의 행에 선택란이 선택됩니다. – jlg

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> 
1

jQuery를 쉽게 할 수 있지만, 자바 스크립트에서, onchange를 AT & T는 추가 시도 할 것이다 선택에 ribute :

onchange="checkValue()" 

을 그리고 자바 스크립트 :

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을"ID를 추가

0

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

관련 문제