Javascript-форум - Выделение строки <select> при выборе checkbox

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Выделение строки <select> при выборе checkbox (https://javascript.ru/forum/misc/3366-vydelenie-stroki-select-pri-vybore-checkbox.html)

Выделение строки <select> при выборе checkbox

Народ помогите! как сделать так чтоб при выборе чекбокса выдилялась соответствующая строка в списке :help: Если выбираешь например в чекбоксах 1,3 соответствующие 1,3 выдиляются в списке.

<form action="http://localhost:8080/webstream/index.php" method="post" name="attr_search">
<input value="1" type="checkbox">1<br>
<input value="2" type="checkbox">2<br>
<input value="3" type="checkbox">3<br>
<input value="4" type="checkbox">4<br>
<input value="5" type="checkbox">5<br>
<select class="inputbox" name="my_select[]"
 multiple="multiple" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>

От JavaScript я далекий человек ... Спасибо!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>blank</title>
	<script type="text/javascript">
var handleCheckboxClick = function(checkbox) {
	var option = document.getElementById('select1').options[checkbox.value - 1];
	option.selected = !option.selected;
};
	</script>
</head>
<body>
	<form id="form1" action="blank.html" method="post">
	<input value="1" type="checkbox" onclick="handleCheckboxClick(this);" />1<br />
	<input value="2" type="checkbox" onclick="handleCheckboxClick(this);" />2<br />
	<input value="3" type="checkbox" onclick="handleCheckboxClick(this);" />3<br />
	<input value="4" type="checkbox" onclick="handleCheckboxClick(this);" />4<br />
	<input value="5" type="checkbox" onclick="handleCheckboxClick(this);" />5<br />
	<select id="select1" multiple="multiple" size="5">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
	</select>
	</form>
</body>
</html>

Спасибо Работает !!!:dance:

а как тоже самое только на Jquery?

terveg,
:-?

<!DOCTYPE HTML>
<html>
<head>
	<title>blank</title>
    <meta charset="utf-8">
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
    $(function () {
       $("#form1").on("click", "input:checkbox",function (event) {
           var $indx = $("input:checkbox").index(this);
           $indx++;
           $("#select1 option:nth-child("+$indx+")").prop({"selected" : this.checked});
       });
    })
  </script>
</head>
<body>
	<form id="form1" action="blank.html" method="post">
	<input value="1" type="checkbox"  />1<br />
	<input value="2" type="checkbox"  />2<br />
	<input value="3" type="checkbox"  />3<br />
	<input value="4" type="checkbox"  />4<br />
	<input value="5" type="checkbox"  />5<br />
	<select id="select1" multiple="multiple" size="5">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
	</select>
	</form>
</body>
</html>