Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Замена ссылки при установки галочек (https://javascript.ru/forum/misc/52829-zamena-ssylki-pri-ustanovki-galochek.html)

DENERIK 09.01.2015 07:40

Замена ссылки при установки галочек
 
Здравствуйте ребята !

Нужно чтобы ссылка менялась при постановке и удалении галочек.

Вот код с двумя галочками:
<input type="checkbox" name="a1"><span title="...">Графа 1</span>
<input type="checkbox" name="a2"><span title="...">Графа 2</span>

Но как обработать: name="a1" и name="a2" я не знаю.

Подскажите пожалуйста.
Или дайте ссылку на статью по этому вопросу.

А то я гуглил. Но в результатах, замена URL, а не ссылки =(

Erolast 09.01.2015 08:22

Что за ссылка? На что меняться должна? Какой фреймворк используется?

DENERIK 09.01.2015 08:43

В идеале должно быть так;

Если галочки не установлены :
<a href="ССЫЛКА 1" download="download"><div class="a120"><p>СКАЧАТЬ</div></a>


Если установлена первая галочка :
<a href="ССЫЛКА 2" download="download"><div class="a120"><p>СКАЧАТЬ</div></a>


Если установлена вторая галочка :
<a href="ССЫЛКА 3" download="download"><div class="a120"><p>СКАЧАТЬ</div></a>


Если установлены обе галочки :
<a href="ССЫЛКА 4" download="download"><div class="a120"><p>СКАЧАТЬ</div></a>



.a120 {
width: 230px;
position: relative;
top: 70px;
left: 13px;
display: inline-table;
background: rgba(255, 255, 255, 0.3);
text-align: center;
font-size: 110%;
color: rgba(238,238,238,1);
text-shadow: 0px 0px 14px rgba(255, 255, 255, 1);
}

рони 09.01.2015 09:42

DENERIK,
:-?
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  a  {
    display: none;

  }
 .a120 {
width: 230px;
position: relative;
top: 70px;
left: 13px;
display: inline-table;
background: rgba(255, 255, 255, 0.3);
text-align: center;
font-size: 110%;
color: rgba(0,0,0,1);
text-shadow: 0px 0px 14px rgba(255, 255, 255, 1);
}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function() {
    var a = $('[name^="a"]'),
        b = $("a");
    a.click(function() {
        var c = 0;
        a.each(function(a, b) {
            this.checked && (c += a + 1)
        });
        b.hide().eq(c).show()
    });
    b.eq(0).show()
});
  </script>
</head>

<body>
<input type="checkbox" name="a1"><span title="...">Графа 1</span>
<input type="checkbox" name="a2"><span title="...">Графа 2</span>
<a href="ССЫЛКА 1" download="download"><div class="a120">СКАЧАТЬ1</div></a>
<a href="ССЫЛКА 2" download="download"><div class="a120">СКАЧАТЬ2</div></a>
<a href="ССЫЛКА 3" download="download"><div class="a120">СКАЧАТЬ3</div></a>
<a href="ССЫЛКА 4" download="download"><div class="a120">СКАЧАТЬ4</div></a>
</body>

</html>

DENERIK 09.01.2015 16:50

А "http://ajax.googleapis.com/ajax/libs.../jquery.min.js" это что ?

Erolast 09.01.2015 17:58

jQuery

DENERIK 17.01.2015 02:25

Не понимаю, где ты указываешь по какой ссылке качать.


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