Проверка 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 красным. блоки которые представлены генерирует магазином. |
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>
|
Большое спасибо + в карму
|
| Часовой пояс GMT +3, время: 19:41. |