после выбора 2х input:radio отображать кнопку
Подскажите как отображать кнопку, при условии что выбрано значение в первой группе input:radio и во второй группе input:radio
вот как мне это объединить?
var $a = $('input[id^=type_]');
var $b = $('input[id^=deliv_]');
var $show_a = '0';
var $show_b = '0';
$a.change(function(){ $show_a = '1'; })
$b.change(function(){ $show_b = '1'; })
чтобы я мог воспользоватся примерно такой конструкцией:
if($show_a.length && $show_b.length){ $('#orderbut').show(); }
или как сделать правильно? |
piraids,
:write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#orderbut{
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function ()
{
var $a = $('input[id^=type_]'),
$b = $('input[id^=deliv_]'),
show = function(){
if($a.is(":checked") && $b.is(":checked")){ $('#orderbut').show()}} ;
$a.change(show)
$b.change(show)
})
</script>
</head>
<body>
<input id="type_1" name="one" type="radio">
<input id="type_2" name="one" type="radio">
<input id="type_3" name="one" type="radio">
<br>
<input id="deliv_1" name="two" type="radio">
<input id="deliv_2" name="two" type="radio">
<input id="deliv_3" name="two" type="radio">
<div id="orderbut">
ok
</div>
</body>
</html>
|
рони,
спасибо большое!! буду знать) |
<style type="text/css">
#orderbut {
display: none;
}
input[name="one"]:checked ~ input[name="two"]:checked ~ #orderbut {
display: block;
}
</style>
<input id="type_1" name="one" type="radio">
<input id="type_2" name="one" type="radio">
<input id="type_3" name="one" type="radio">
<br>
<input id="deliv_1" name="two" type="radio">
<input id="deliv_2" name="two" type="radio">
<input id="deliv_3" name="two" type="radio">
<div id="orderbut">
ok
</div>
|
рони,
а если у меня еще появляется блок тоже с input radio в зависимости от уровня доступа, как включить его в проверку? Если я сделаю вот так, как я написал ниже - это будет правильно? или есть какой то более легкий вариант?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#orderbut{
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function ()
{
var $a = $('input[id^=type_]'),
$b = $('input[id^=deliv_]'),
$c = $('input[id^=info_]');
if($c.length){
var show = function(){
if($a.is(":checked") && $b.is(":checked") && $c.is(":checked")){ $('#orderbut').show()}} ;
$a.change(show);
$b.change(show);
$c.change(show);
}else{
var show = function(){
if($a.is(":checked") && $b.is(":checked")){ $('#orderbut').show()}} ;
$a.change(show);
$b.change(show);
}
})
</script>
</head>
<body>
<input id="type_1" name="one" type="radio">
<input id="type_2" name="one" type="radio">
<input id="type_3" name="one" type="radio">
<br>
<input id="deliv_1" name="two" type="radio">
<input id="deliv_2" name="two" type="radio">
<input id="deliv_3" name="two" type="radio">
<br>
<input id="info_1" name="three" type="radio">
<input id="info_2" name="three" type="radio">
<input id="info_3" name="three" type="radio">
<div id="orderbut">
ok
</div>
</body>
</html>
|
piraids,
в 29 строке ничего не пропустили? |
рони,
да, поправил) |
piraids,
:write: вариант ... в массиве можно указать любое количество селекторов зависимых input -- будут задействованы только существующие;
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#orderbut{
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function ()
{
var arr = ['input[id^=type_]','input[id^=deliv_]','input[id^=info_]'];
(function (c) {
var show = function () {
for (var a = 0; a < c.length; a++) {
var b = $(c[a]);
if (b.length && !b.is(":checked") ) return false
}
$("#orderbut").show()
};
$.each(c, function (a, b) {
$(b).change(show)
})
})(arr);
})
</script>
</head>
<body>
<input id="type_1" name="one" type="radio">
<input id="type_2" name="one" type="radio">
<input id="type_3" name="one" type="radio">
<br>
<input id="deliv_1" name="two" type="radio">
<input id="deliv_2" name="two" type="radio">
<input id="deliv_3" name="two" type="radio">
<br>
<input id="info_1" name="three" type="radio">
<input id="info_2" name="three" type="radio">
<input id="info_3" name="three" type="radio">
<div id="orderbut">
ok
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 06:34. |