Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Не работает стилизация - радио-кнопка

Не работает стилизация - радио-кнопки

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form action="contoller">
.....
 <td>
                            <div class="editClass">
                                <label class="labelRadio">
                                    <input class="radioClass" type="radio" name="edit"
                                           onMouseDown="this.isChecked=this.checked;"
                                           onClick="this.checked=!this.isChecked;" />
                                    <i></i>
                                </label>
                            </div>
                        </td>
                    </tr>
 
</form>
css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/*+++++++++++++++++++++++++++++++++++++*/
 
/* обозначаем блок - флексом, 
    и указываем, что элементы внутри блока,
    должны распологаться по центру.
*/
.editClass{
  display:flex;
    justify-content:center;
}
 
/*Свойство display отвечает за вывод и 
    визуальное отображение элементов на странице. 
 Так как любой html-элемент генерирует на веб-странице 
прямоугольный контейнер, укажем, что элемент не генерирует никакой контейнер, 
полностью удаляясь со страницы.
*/
 
.radioClass{
 
    display: none;
}
 
label{
  display:inline-block; /*Элемент генерирует строковый блок.*/
}
 
/*рисуем радио-кнопку*/
i{
    display:inline-block; /*Элемент генерирует строковый блок.*/
    width: 20px;
    height: 20px;
    border: 2px solid #431080;
    position: relative; /*Элемент находится в нормальном потоке и отображается 
        на веб-странице в том месте, в котором 
        он расположен в коде HTML-документа.*/
   
    border-radius: 5px; /*закругление углов*/
}
 
i:before{
    content:'';
    transform:scale(0); /*для горизонтального масштабирования и для вертикального*/
    transition: .4s;
    background: green;/*фон кнопки*/
 
    /*position: absolute;*/
    /*top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;*/
}
 
/*что будет происходить с выделенной кнопкой*/
input:checked+i:before{
    transform: scale(1);
}
При нажатии на радио-кноку - она должна выделяться зеленым цветом.

Кроме этого, скажите она из формы сможет быть прочитана, что она выделена, ведь по факту выделяется кнопка нарисованная в тегах <i> ?
Ответ: Решено, спасибо.
Вопрос: Калькулятор с 3 группами радио кнопок

Суть вопроса такая: есть 3 группы радиокнопок.

1. При выборе радиокнопки из первой группы в переменную floor должно передаваться значение выбранной радио кнопки.
2. При выборе радиокнопки из первой группы в переменную roof должно передаваться значение выбранной радио кнопки.
3. При выборе радиокнопки из первой группы в переменную constract должно передаваться значение выбранной радио кнопки.

Далее в зависимости от комбинации выбранных радио кнопок в каждой группе
(пример 1: для floor выбрана 2 кнопка, для roof выбрана 4 кнопка, для constract выбрана 3 кнопка
пример 2: для floor выбрана 3 кнопка, для roof выбрана 2 кнопка, для constract выбрана 1 кнопка)

в div#result должна вставляться соотвествующая картинка.

Подскажите как можно сделать данный калькулятор (желательно с комментариями к каждой строке javascript) или в каком направлении копать.

Ссылка на мои попытки

P.S. с javascript знаком на уровне менять параметры слайдеров по документации.
Ответ: Все круто. Все работает. Благодарю еще раз сенсея Рони Однако я так и не смог до конца понять логику скрипта.

$(function() { //объявляем функцию
    var b = [0, 0, 0], //объявляем переменную в виде массива (не понял почему именно такие числа) (вроде как нулевые  элементы массива каждой из трех групп радиокнопок)
        d = [15, 3, 1]; //объявляем переменную в виде массива (не понял почему именно такие числа)
    $("#form1, #form2, #form3").each(function(e, c) { //здесь для каждого блока с указанными id объявляем функцмию с 2мя параметрами (переменная "е" это видимо индекс элемента массива в котором хранятся id  div-ов с радиокнопками  )
        var f = $("input", c); //объявляем переменную f которая высчитывается по функции с параметрами input и c (видимо с это родительский блок в котором лежит кликнутый input)
        $(c).on("click", "input", function(a) { //
            a = f.index(this); //видимо передаем в переменную "а" индекс кликнутой кнопки
            b[e] = a; //это я не понял(вроде берем из массива b элемент с индексом e)
            a = b.reduce(function(a, b, c) { //передаем для каждого ранее определенного индекса массива его соотвествующее значение (более точно не могу понять это действие)
                return a + b * d[c] // возвращаем что-то. Что именно я не понял, а именно d[c] не понял
            }, 0);
            $("#result").html(++a + ' картинка') //тут увеличиваем значение "а"  на 1 и записываем полученное значение в переменную "а" и добавляем слово картинка
        })
    })
});


В общем я почитал за эти 3 дня учебник js, вылавливая моменты указанные в данном скрипте. Попытался выстроить логику скрипта, чтобы потом смочь повторить его самостоятельно, но у меня не получилось. Если кому-то будет не лень, прошу объяснить мне непонятные мне моменты в данном скрипте.
Вопрос: Отправка формы при нажатии на радио кнопку

Здравствуйте как можно отправить данные при нажатии на радио кнопку без submit
Или можете пред6 другой вариант, мне нужно после выборке нажать на текст и перейти на определённую форму, а не так: нажал на радио кнопку, а потом ещё нажал отправить
Ответ: не работает, мне нужно здесь использовать:
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
 printf('
<script>
document.getElementById("radio").onchange = function(){
    }
</script>
<tr><td style="'.$td.'"><span style="display:none"><input type="radio" class="radio" id= "select%s" name="SELECT" value="%s"></span></td>
<td style="'.$td.'"><img style="width:32px;height:32px" src="/shop/img/%s" /></td>
<td style="'.$td.'"><label for="select%s">%s</td><td</label>
', $row['id'], $row['id'], $row['img'], $row['id'], $row['title'], $row['id']); 
}
while($row = mysqli_fetch_array($result))
?>
Вопрос: Как установить возможность выделения радио-кнопки или checkbox? Только одного.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<tr>
                <td>1</td>
                <td>Lamborghini CENTENARIO 2017</td>
                <td>black</td>
                <td>370</td>
                <td>10</td>
                <td>5</td>
                <td>
                    
                    $1,900,000.00
                </td>
                <td>
                    20-05-2002
                </td>
                <td>2018</td>
                <td>
                    <div class="editClass">
                        <label>
                            <input class="radioClass" type="checkbox" name="z1234j"
                            />
                            <i></i>
                        </label>
                    </div>
                </td>
            </tr>
        
            <tr>
                <td>2</td>
                <td>Acura NSX 2016</td>
                <td>blue</td>
                <td>330</td>
                <td>8</td>
                <td>10</td>
                <td>
                    
                    $150,000.00
                </td>
                <td>
                    20-05-2001
                </td>
                <td>2018</td>
                <td>
                    <div class="editClass">
                        <label>
                            <input class="radioClass" type="checkbox" name="z12вавва34j"
                            />
                            <i></i>
                        </label>
                    </div>
                </td>
            </tr>
        
            <tr>
                <td>3</td>
                <td>Aston Martin Vantage GT12</td>
                <td>red</td>
                <td>297</td>
                <td>7</td>
                <td>15</td>
                <td>
                    
                    $370,000.00
                </td>
                <td>
                    20-05-2003
                </td>
                <td>2017</td>
                <td>
                    <div class="editClass">
                        <label>
                            <input class="radioClass" type="checkbox" name="yx125676734j"
                            />
                            <i></i>
                        </label>
                    </div>
                </td>
            </tr>

Радио-кнопки и чекбоксы - не принадлежать к какой-либо группе, каждый независимо расположен на строке таблице в ячейке, для каждого генерируется уникальное имя.

Как сделать так, чтобы пользователь не смог выделить одновременно больше одного ?
Он лишь может только снять выделения (это реализовано на CSS) и не один не будет выделен, но не должно быть одновременно выделено больше одного.

Затем вся форма отправляется на сервер для обработки.
Строки в таблице каждый раз могут генерироваться в разном количестве.
Ответ: четко работает, спасибо.

Решено.
Вопрос: При использовании Bootstrap табов в и радио кнопок возникли трудности

Суть такова : Есть страница "Опции темы" для Wordpress, имются табы (tabs), в каждом таб-пане (tab-pane) есть радио кнопки.
Дело в том что я могу включить только радио кнопки с первого таба , с остальных не могу, выглядит это так :


Каждая панель таба представляeт собой отдельный fieldset, так что вроде-бы должно работать...

Кликните здесь для просмотра всего текста

Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-12 options-menu">
            <ul class="nav nav-pills nav-stacked nav-tabs" role="tablist">
                <li role="presentation" class="nav active"><a href="#header" aria-controls="profile" role="tab" data-toggle="tab">Header</a></li>
                <li role="presentation" class="nav"><a href="#navigation" aria-controls="profile" role="tab" data-toggle="tab">Navigation</a></li>
            </ul>
        </div>
 
        <div class="col-lg-8 col-md-9 col-sm-12">
        <form method="POST">
            <div class="tab-content">
 
                <div class="tab-pane active" role="tabpanel" id="header">
                    <fieldset>
                    <h3>Header style : </h3>
                    <ul class="thumbnails" >
                        <li>
                            <input type="radio" name="header-no-image" value="header-no-image"/>
                            <label for="header-no-image">Header without image</label>
                            <a href="#header-one" class="thumbnail">
                                <img src="<?php echo get_template_directory_uri(). '/img/header-no-image.JPG' ?>" alt="header-no-image">
                            </a>
                        </li>
                        <li>
                            <input type="radio" name="header-image" value="header-image"/>
                            <label for="header-image">Header with image</label>
                            <a href="#header-two" class="thumbnail">
                                <img src="<?php echo get_template_directory_uri(). '/img/header-image.JPG' ?>" alt="header-no-image">
                            </a>
                        </li>   
                    </ul>   
                    </fieldset> 
                </div> <!-- Header tab end -->
 
                <div class="tab-pane" role="tabpanel" id="navigation">
                    <form method="POST">
                    <fieldset>
                    <h3>Navigation style : </h3>
                    <ul class="thumbnails" data-toggle="buttons-radio">
                        <li>
                            <input type="radio" name="navbar-dark" value="navbar-dark"/>
                            <label for="navbar-dark">Dark navbar </label>
                            <a href="#navbar-one" class="thumbnail">
                                <img src="<?php echo get_template_directory_uri(). '/img/navigation-dark.JPG' ?>" alt="header-no-image">
                            </a>
                        </li>
                        <li>
                            <input type="radio" name="navbar-light" value="navbar-light"/>
                            <label for="navbar-light">Light navbar </label>
                            <a href="#navbar-two" class="thumbnail">
                                <img src="<?php echo get_template_directory_uri(). '/img/navigation-light.JPG' ?>" alt="header-no-image">
                            </a>
                        </li>   
                    </ul>   
                    </fieldset>             
                </div> <!-- Navigation pane end -->
 
                <input type="hidden" name="update_settings" value="1" /> <!-- Will help to hande form submit -->
 
                <div class="center">
                        <button class="btn btn-success" type="submit">Save</button>
                        <button class="btn btn-danger" type="reset">Dismiss</button>
                </div> <!-- Form buttons visible on all panes -->
 
            </div>  <!-- Tab content end -->
            </form>     
        </div>
 
    </div>
Ответ: denisov3, jQuery вам в помощь! )))
Вопрос: Не могу получить значение label у нажатой радио кнопки

Вот в чем проблема. Не силен я особо в Jqery да и в JS. Но вдруг понадобилось получить значение span нажатой радио кнопки.
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
<html>
<head>
    <meta charset = "utf-8">
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script type="text/javascript">
    
    
    function SendRequest(){
 
    $.ajax({    
        type: "POST",
        url: "loh.php",
        data: "token=<?=session_id()?>&data1="+$(':checked').val(),
        success: function(response){
            $('#response').html(response);
        }
        });
    };
</script>
</head>
<body>
<div id="response"></div>
    <div>
        <span id="block_attr_sel_1">
                
            <span class="input_type_radio"><input type="radio" name="jshop_attr_id[1]" id="jshop_attr_id11" value="1" checked="checked" onclick="setAttrValue('1', this.value);"> <label for="jshop_attr_id11"><span class="radio_attr_label">S</span></label></span>
                
            <span class="input_type_radio"><input type="radio" name="jshop_attr_id[1]" id="jshop_attr_id12" value="2" onclick="setAttrValue('1', this.value);"> <label for="jshop_attr_id12"><span class="radio_attr_label">M</span></label></span>
                
            <span class="input_type_radio"><input type="radio" name="jshop_attr_id[1]" id="jshop_attr_id13" value="3" onclick="setAttrValue('1', this.value);"> <label for="jshop_attr_id13"><span class="radio_attr_label">L</span></label></span>                
                
        </span>
    </div>
 
 
                <p><button onclick="SendRequest();">get</button></p>
            
            
                
 
</body>
</html>
Собственно мне нужно чтоб при нажимании GET мне возвращалось значение S или M или L, в зависимости от выбранной радио кнопки. Уже перепробовал подставлять к :checked все что можно. Получал только значение val, но не label span class="radio_attr_label".

Вот обработчик на вс. случай. loh.php
Код PHP
1
2
3
4
5
6
7
8
<?php session_start();
if(session_id() != $_POST['token']) die('STOP');
?>
 
<h5>Token:<?php echo $_POST['token']; ?></h5>
<p>Var1<strong><?=$_POST['data1']?></strong><p>
 
<hr />
Ответ: k-x, Большое спасибо. Примерно понял принцип действия. Буду пробовать. Отпишусь.

Добавлено через 24 минуты
Глянул у Вас на сайте по ссылке. Примерно то что нужно. Дальше буду допиливать. Спасибо за быстрый ответ.
Вопрос: Как сделать отступы в радио кнопках

Добрый день! Подскажите пожалуйста, как сделать свои отступы в радио кнопках? Использую radiosToSlider. Там все скриптом прописывается, но в js плохо разбираюсь. Можно как-то по другому прописать?
Ответ: KyponaTka, почему вы не хотите задать все эти вопросы автору плагина (усато-бородатому чуваку в верхнем правом углу страницы ), а мучаете ни в чем не повинных людей?
Вопрос: Раскрыть содержимое тега p при нажатии на радио-кнопку

Ребята помогите пожалуйста начинающему программисту.
Есть код:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div>
                        <input type="radio" class="checkCat" name="checkCat" value=">">
                        <label class="checkCatLabel"> Тонирующие, солнцезащитные</label><br>
                        <p class="catRow" style="display: none; padding-left: 30px;">
 
                            <span class="forOpera">
                                <img src="image/calculator/plenka_img0_0.jpg" class="cat_image">
                                <input type="radio" class="productRow" name="productRow[]" value="750">
                                <label>Светлое зеркало (silver 5)</label>
                            </span>
 
                            <span class="forOpera">
                                <img src="image/calculator/plenka_img0_1.jpg" class="cat_image">
                                <input type="radio" class="productRow" name="productRow[]" value="900">
                                <label>Светлое зеркало (silver 15)</label>
                            </span>
 
                            <span class="forOpera">
                                <img src="image/calculator/plenka_img0_2.jpg" class="cat_image">
                                <input type="radio" class="productRow" name="productRow[]" value="900">
                                <label>Светлое зеркало (silver 25)</label>
                            </span>
 
                            <span class="forOpera">
                                <img src="image/calculator/plenka_img0_3.jpg" class="cat_image">
                                <input type="radio" class="productRow" name="productRow[]" value="1100">
                                <label>Светлое зеркало (silver 40)</label>
                            </span>
                        </p>
                    </div>
Тэг р за счет display:none скрыт со всем содержимым. Цэлый день пытаюсь через jquery раскрыть это содержимое при нажатии на радио-кнопку. ДЕлаю выборку $(.checkCat), а как добраться до тэга р, чтобы установить ему стиль display:block ?
Ответ: Здесь не обязательно js использовать
Вот примеры решения без js

Вопрос: Скрипт по событию нажатие радио кнопки

Помогите чайнику пожалуйста.
Нужен скрипт. При нажатии на радио кнопку #pickup.pickup
Должны автоматически заполниться инпуты
<input id="shipping_address_city"> Рязань
<input id="shipping_address_address_1"> ул. Советская д.95
Ответ: Demokrat07,
ахах)
Вопрос: Как отправить значение нажатой radio кнопки?

Всем привет. Народ, подскажите, пожалуйста - есть код

$(bg).find("[data-bme]").each(function() {
			var elTag = $(this)[0].nodeName.toLowerCase(); //prop("tagName");
			bc.push($(this).attr("data-bme")); // add field name

			switch (elTag) { // find value
				case "textarea": // textarea
					bo.push($(this).val());
					break;
				case "select": // selects
					bo.push($(this).find(":selected").text());
					break;
				case "input": 
					var elType = $(this).attr("type").toLowerCase(); // get input type
					switch (elType){
						case "text": // text fields
						case "hidden": // hidden values
						case "radio": // radio
							bo.push($(this).val());
							break;
						case "checkbox": // guess
							bo.push($(this).is(":checked") ? bmeData["txt.yes"] : bmeData["txt.no"]);
							break;
					}
					break;
				default: // div, span, p, etc.
					bo.push($(this).text());
			}
			
		});


Как сделать чтобы выбиралось значение именно нажатой радио кнопки. Сейчас на почту приходят значение всех радио кнопок. Пробовал писать в 18 строке - bo.push($(this).find(":checked").val()); - но так вообще ничего не приходит...
Ответ: Rise,
огромное Вам спасибо - теперь все работает