Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Проверка input [type="radio"] (https://javascript.ru/forum/jquery/69263-proverka-input-%5Btype%3D-radio-%5D.html)

klifort 09.06.2017 22:34

Проверка 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 красным.

блоки которые представлены генерирует магазином.

рони 09.06.2017 23:00

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>

klifort 09.06.2017 23:22

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


Часовой пояс GMT +3, время: 23:46.