Смена цены после выбора radio кнопки

[витослав]

Суть такая, попытался сделать чтобы при выбранной радио-кнопки, менялась цена
Вот как я попытался это реализовать, но заглох, так как не знаю как правильно дописать

скрипт

function visiblePrice(radio) {
            var view_price = document.getElementById('hidden_blok');
            view_price.style.display = document.querySelectorAll(":checked").length ? 'block': 'none';
            document.getElementById('view_price').disabled = false;
        }

место где должна меняться цена

<div id="hidden_blok"><span id="view_price">267</div><div id="hidden_blok"><span id="view_price">879</div><div id="view_price"><span id="hidden_blok">1245</div>

в hidden_blok прописал display: none;

радио кнопки

<li><input type="radio" name="check[]" onChange="visiblePrice(this)" value="200"> 200</li>
                                <li><input type="radio" name="check[]" onChange="visiblePrice(this)" value="500"> 500</li>
                                <li><input type="radio" name="check[]" onChange="visiblePrice(this)" value="1000"> 1000</li>

[рони]

витослав,
а то что id это уникальный номер у вас повторяется это нормально? и что вы хотите дописать?

[Rise]

<form name="form1">
	<input type="radio" name="check" value="267"><label>200</label>
	<input type="radio" name="check" value="879"><label>500</label>
	<input type="radio" name="check" value="1245"><label>1000</label>
</form>
<div>Цена: <span id="price">267</span></div>

<script>
document.form1.check[0].checked = true;
for (var key in document.form1.check) {
	document.form1.check[key].onchange = function () {
		document.getElementById('price').innerHTML = this.value;
	}
}
</script>

[витослав]

<form name="form1">
	<input type="radio" name="check" value="267"><label>200</label>
	<input type="radio" name="check" value="879"><label>500</label>
	<input type="radio" name="check" value="1245"><label>1000</label>
</form>
<div>Цена: <span id="price">267</span></div>

<script>
document.form1.check[0].checked = true;
for (var key in document.form1.check) {
	document.form1.check[key].onchange = function () {
		document.getElementById('price').innerHTML = this.value;
	}
}
</script>

а почему скрипт перестает работать с множественными объектами, я дописал document.getElementsByClassName('price').innerHTML = this.value; исправил id="price" на class="price" и скрипт ваще перестал работать

[рони]

document.getElementsByClassName('price')

выберите в этом нужный вам элемент по индексу

[витослав]

выберите в этом нужный вам элемент по индексу

вот так document.getElementsByClassName('itog')[0].innerHTML = this.value; ?

ничо не понял, есть пример работы индексов?
и выбирать нужно не 1 элемент
есть страница с товарами, их 10-15 да сколько угодно и у каждого есть выбор 200 500 1000 грамм, так вот скрипт работает только с одним товаром
пробовал в форме менять name="check[0]" у другого name="check[1]" но ничерта не пашет

[Rise]

витослав, учись студент:

<style>
form[name="form"]{float:left;border:1px solid #ccc;padding:10px;margin-right:5px;}
input[name="price"]{border:0;}
</style>

<form name="form">
	<input type="radio" name="check" value="267"><label>200</label>
	<input type="radio" name="check" value="879"><label>500</label>
	<input type="radio" name="check" value="1245"><label>1000</label><br>
	<label>Цена: </label><input type="text" name="price" value="" readonly>
</form>

<form name="form">
	<input type="radio" name="check" value="267"><label>200</label>
	<input type="radio" name="check" value="879"><label>500</label>
	<input type="radio" name="check" value="1245"><label>1000</label><br>
	<label>Цена: </label><input type="text" name="price" value="" readonly>
</form>

<form name="form">
	<input type="radio" name="check" value="267"><label>200</label>
	<input type="radio" name="check" value="879"><label>500</label>
	<input type="radio" name="check" value="1245"><label>1000</label><br>
	<label>Цена: </label><input type="text" name="price" value="" readonly>
</form>

<script>
for (var i = 0; i < document.form.length; i++) {
	document.form[i].check[0].checked = true;
	document.form[i].price.value = document.form[i].check[0].value;
	document.form[i].onclick = function(e) {
		var target = e && e.target || event.srcElement;
		if (target.name != 'check') return;
		this.price.value = target.value;
	}
}
</script>