Форум

piraids · #1 (**permalink**) 30.04.2014, 12:50

Подскажите как отображать кнопку, при условии что выбрано значение в первой группе 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(); }

или как сделать правильно?

рони · #2 (**permalink**) 30.04.2014, 13:43

piraids,

<!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>

piraids · #3 (**permalink**) 30.04.2014, 14:01

рони,
спасибо большое!! буду знать)

devote · #4 (**permalink**) 30.04.2014, 14:38

<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>

piraids · #5 (**permalink**) 05.05.2014, 17:29

рони,
а если у меня еще появляется блок тоже с 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>

рони · #6 (**permalink**) 05.05.2014, 20:44

piraids,
в 29 строке ничего не пропустили?

piraids · #7 (**permalink**) 06.05.2014, 09:18

рони,
да, поправил)

рони · #8 (**permalink**) 06.05.2014, 11:08

piraids,

вариант ... в массиве можно указать любое количество селекторов зависимых 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>

Форум

Справочник

Discord чат

Курсы javascript