Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.06.2017, 21:34
Аватар для klifort
Новичок на форуме
Отправить личное сообщение для klifort Посмотреть профиль Найти все сообщения от klifort
 
Регистрация: 09.06.2017
Сообщений: 3

Проверка input [type="radio"]
Всем доброе время суток.
При реализации работы в интернет магазине столкнулся с таким вопросом:
Проверка кнопки радио в блоке
<div class="add-form">
    <div class="list-atributes">
	<p>
		<input type="radio" value="8" name="kolor" id="kolor_zl">
		<label for="kolor_zl">zielony</label>
	</p>
	<p>
		<input type="radio" value="8" name="kolor" id="kolor_cz">
		<label for="kolor_cz">czerwony</label>
	</p>
	<p>
	      <input type="radio" value="7" name="kolor" id="kolor_bl">
	      <label for="kolor_bl">biały</label>
	</p>
  </div>
  <div class="list-atributes">
	<p>
		<input type="radio" value="8" name="size" id="size_126">
		<label for="size_126">126</label>
	</p>
	<p>
		<input type="radio" value="8" name="size" id="size_134">
		<label for="size_134">134</label>
	</p>
	<p>
		<input type="radio" value="7" name="size" id="size_156">
		<label for="size_156">156</label>
	</p>
	<p>
		<input type="radio" value="7" name="size" id="size_166">
		<label for="size_166">166</label>
	</p>
  </div>					
  <div class="prices">					
       <p class="add-inputs">
	<input type="text" class="pInputIlosc" value="1" >
	<input alt="Dodaj do koszyka" type="image" class="btn_basket">
	<span class="shopping-basket"></span>
		</p>
  </div>
</div>


$(".add-inputs .btn_basket").bind("click", function(){
	$(".list-atributes").each(function(){
		 var cr = $(".list-atributes input[type='radio']").is(":checked") 
		if(cr ==false){
				$(this).parent().find('label').css("border", "1px solid red");
		}else
			{
				$(this).parent().find('label').css("border", "1px solid green");
		}
	})
});



Проблема в том что при выборе хоть одной кнопки border становиться для всех зеленый, а мне нужно чтоб цвет менялся только в том блоке "list-atributes" где выбрана одна кнопка, а в блоку где не выбрана border становиться для всех input красным.

блоки которые представлены генерирует магазином.
Ответить с цитированием
  #2 (permalink)  
Старый 09.06.2017, 22:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

klifort,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
$(".add-inputs .btn_basket").on("click", function(){
  $(".list-atributes").each(function(){
     var  border = $("input:checked", this).length ? "1px solid green" : "1px solid red"
     $('label',this).css("border", border);
  })
});
});
  </script>
</head>

<body>
<div class="add-form">
    <div class="list-atributes">
  <p>
    <input type="radio" value="8" name="kolor" id="kolor_zl">
    <label for="kolor_zl">zielony</label>
  </p>
  <p>
    <input type="radio" value="8" name="kolor" id="kolor_cz">
    <label for="kolor_cz">czerwony</label>
  </p>
  <p>
        <input type="radio" value="7" name="kolor" id="kolor_bl">
        <label for="kolor_bl">biały</label>
  </p>
  </div>
  <div class="list-atributes">
  <p>
    <input type="radio" value="8" name="size" id="size_126">
    <label for="size_126">126</label>
  </p>
  <p>
    <input type="radio" value="8" name="size" id="size_134">
    <label for="size_134">134</label>
  </p>
  <p>
    <input type="radio" value="7" name="size" id="size_156">
    <label for="size_156">156</label>
  </p>
  <p>
    <input type="radio" value="7" name="size" id="size_166">
    <label for="size_166">166</label>
  </p>
  </div>
  <div class="prices">
       <p class="add-inputs">
  <input type="text" class="pInputIlosc" value="1" >
  <input alt="Dodaj do koszyka" type="image" class="btn_basket">
  <span class="shopping-basket"></span>
    </p>
  </div>
</div>


</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 09.06.2017, 22:22
Аватар для klifort
Новичок на форуме
Отправить личное сообщение для klifort Посмотреть профиль Найти все сообщения от klifort
 
Регистрация: 09.06.2017
Сообщений: 3

Большое спасибо + в карму
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проверка полей input и select на обязательность функция Jquery find() mxup Общие вопросы Javascript 5 02.08.2016 05:32
проверка input (пожалуйста, помогите) alma95 Общие вопросы Javascript 13 17.02.2015 14:26
Проверка input с одинаковым class igorianru Events/DOM/Window 1 05.11.2013 23:49
Проверка input file dizent jQuery 13 26.09.2013 18:32
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27