When choosing the delivery time, I try to transfer the value in the tooltip, in this case, this time -> click "select time". When I choose, I write this selected value in the same field. Prompt how to transfer value only for one object (DOM element (selector)).
$(".time-range__selected, .close_tooltip").on("click", function(e) { $(".time-range__tooltip").addClass("dnone"); var toolTip = $(this).parent().next(".time-range__tooltip"); if (toolTip.hasClass("dnone")) { toolTip.removeClass("dnone"); var firstClick = true; $(document).bind("click.myEvent", function(e) { if (!firstClick && $(e.target).closest(".time-range__tooltip").length == 0) { toolTip.addClass("dnone"); $(document).unbind("click.myEvent"); } firstClick = false; }); } e.preventDefault(); }); $(".time-radio").on("click", function(e) { var newTimeRangeText = $(this).next().text(); $(".time-range__selected").text(newTimeRangeText); }) #order_form label { color: #656565; display: inline-block; font-size: 12px; /*margin-bottom: 10px;*/ margin-right: 10px; text-align: right; width: 100%; font-weight: normal; } #order_form .chosubmission label { text-align: center; } #order_form input[type="text"], #order_form input[type="email"], #order_form textarea, #order_form select { background: #ffffff none repeat scroll 0 0; border: 1px solid #e0e0e0; display: inline-block; font-size: 13px; height: 30px; margin-bottom: 15px; padding: 0 10px; line-height: 25px; width: 100%; } #order_form .control-group .controls { display: inline; } #order_form .control-label { padding-top: 3px; } label span.required, .control-label span.required { color: #b94a48; } #chodelmethod { background: #ffffff none repeat scroll 0 0; border: 1px solid #e0e0e0; display: inline-block; height: 30px; margin-bottom: 5px; padding: 0 10px; line-height: 25px; vertical-align: top; width: 100%; padding-bottom: 15px; } .chotab_content { font-size: 12px; } table.chodeltable { border-collapse: collapse; margin-bottom: 10px; text-align: left; width: 100%; } table.chodeltable td { border: 1px solid #e0e0e0; padding: 9px; text-align: left; vertical-align: top; } table.chodeltable th { color: #656565; font-weight: normal; } td.tablebold { font-weight: bold; } #chopaymethod { background: #ffffff none repeat scroll 0 0; border: 1px solid #e0e0e0; display: inline-block; font-size: 13px; height: 30px; line-height: 20px; margin-bottom: 15px; padding: 5px 10px; width: 414px; } #chopaymethod_chosen .chosen-search { display: none; } .payoptionsimgs { margin-bottom: 10px; margin-left: 225px; } .payoptionsimgs img { margin-right: 15px; } .choinfoblock { background: #f6f6f6 none repeat scroll 0 0; border: 1px solid #e0e0e0; margin: 0 auto 30px; padding: 15px 30px 10px 20px; max-width: 700px; } .choinfoblocktitle { display: block; font-size: 14px; font-weight: bold; } .chosubmission { color: #656565; font-size: 13px; text-align: center; } .chosubmission a { color: #d22100; } #termsagreement { margin: 10px 0 30px; } .chosubmitbtn { cursor: pointer; margin-bottom: 20px; } #order_form .paytypes .controls { display: block; margin-left: 20px; } #order_form .paytypes .control-label { float: left; } #order_form .paytypes label.radio { text-align: left; width: 100%; } padding: 10px 10px 10px 45px; } span.chotab a.pick_up { color: #656565; text-decoration: none; } span.choactive a.pick_up { color: #d22100; } .hiddenblock { display: none; } #order_form .chosubmission label { text-align: center; margin-bottom: 15px; margin-left: 13px; display: inline-block; } #order_form .chosubmission label input { position: relative !important; margin: 0 5px 0 0; } .chosubmission .form-actions input[type="submit"] { background: #be3d23; /* Old browsers */ background: -moz-linear-gradient(top, #be3d23 0%, #b43a22 25%, #96321d 72%, #882e1d 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #be3d23 0%, #b43a22 25%, #96321d 72%, #882e1d 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #be3d23 0%, #b43a22 25%, #96321d 72%, #882e1d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#be3d23', endColorstr='#882e1d', GradientType=0); /* IE6-9 */ border: none; font-size: 14px; position: relative; left: -28px; margin-bottom: 25px; } .choinfoblock.chosubmission .col-md-4 { width: auto; } .choinfoblock.chosubmission .col-md-8 { width: 100%; } .control-group.delivery-loader { text-align: center; position: relative; top: -25px; } .delivery { /*border: 1px solid #e0e0e0;*/ display: inline-block; } .column-1 { /*width: 190px;*/ width: 50%; } .column-2, .column-3 { with: 115px; } .delivery__table { display: table; } .delivery__row { display: table-row; font-size: 12px; color: #656565; } .delivery__table .delivery__row:nth-of-type(2)::after { display: block; content: ''; padding-bottom: 5px; } .delivery__cell { display: table-cell; padding: 0 7px; } .delivery { display: block; } .h_row { border-bottom-style: solid; } .h_row { border-bottom: 1px solid #e0e0e0; } .time-range-tooltip { list-style: none; } input[name="offer[]"]:not(:checked), input[name="offer[]"]:checked { position: absolute; left: -9999px; } input[name="offer[]"]:not(:checked) + label, input[name="offer[]"]:checked + label { position: relative; padding-left: 15px; cursor: pointer; line-height: 1.4; font-weight: normal; font-size: 13px; margin-bottom: 0; } input[name="offer[]"]:checked + label { color: #a32b25; } input[name="offer[]"]:not(:checked) + label:before, input[name="offer[]"]:checked + label:before { content: ''; position: absolute; left: 1px; top: 3px; width: 13px; height: 13px; border-radius: 0; background: url("../images/old-chekbox.png") no-repeat 0 -13px; } input[name="offer[]"]:not(:checked) + label:after, input[name="offer[]"]:checked + label:after { content: ""; background: url("../images/old-chekbox.png") no-repeat 0 0; position: absolute; top: 3px; left: 1px; /*font-size: 16px;*/ line-height: 0.8; color: #656565; transition: all .2s; width: 13px; height: 13px; } input[name="offer[]"]:not(:checked) + label:after { opacity: 0; transform: scale(0); } input[name="offer[]"]:checked + label:after { opacity: 1; transform: scale(1); } input[name="offer[]"]:disabled:not(:checked) + label:before, input[name="offer[]"]:disabled:checked + label:before { box-shadow: none; border-color: #bbb; background-color: #ddd; } input[name="offer[]"]:disabled:checked + label:after { color: #999; } input[name="offer[]"]:disabled + label { color: #aaa; } /*new radiobutton style*/ input.delivery_methods[type="radio"]:not(:checked), input.delivery_methods[type="radio"]:checked, input.time-radio[type="radio"]:not(:checked), input.time-radio[type="radio"]:checked { position: absolute; left: -9999px; } input.delivery_methods[type="radio"]:not(:checked) + label, input.delivery_methods[type="radio"]:checked + label, input.time-radio[type="radio"]:not(:checked) + label, input.time-radio[type="radio"]:checked + label { position: relative; padding-left: 20px; cursor: pointer; line-height: 1.4; font-weight: normal; font-size: 12px; margin-bottom: 0 !important; font-weight: 600 !important; text-align: left !important; } input.time-radio[type="radio"]:not(:checked) + label, input.time-radio[type="radio"]:checked + label, input.time-radio[type="radio"]:checked + label { font-size: 11px !important; font-weight: 400 !important; } input.delivery_methods[type="radio"]:not(:checked) + label:before, input.delivery_methods[type="radio"]:checked + label:before, input.time-radio[type="radio"]:not(:checked) + label:before, input.time-radio[type="radio"]:checked + label:before { content: ''; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border: 1px solid #aaa; background: #f8f8f8; border-radius: 8px; /*box-shadow: inset 0 1px 1px rgba(0,0,0,0.3)*/ } input.delivery_methods[type="radio"]:not(:checked) + label:after, input.delivery_methods[type="radio"]:checked + label:after, input.time-radio[type="radio"]:not(:checked) + label:after, input.time-radio[type="radio"]:checked + label:after { content: ""; width: 6px; height: 6px; border-radius: 4px; display: block; background: #144865; position: absolute; top: 6px; left: 4px; line-height: 0.8; } input.delivery_methods[type="radio"]:not(:checked) + label:after, input.time-radio[type="radio"]:not(:checked) + label:after { opacity: 0; transform: scale(0); } input.delivery_methods[type="radio"]:checked + label:after, input.time-radio[type="radio"]:checked + label:after { opacity: 1; transform: scale(1); } input.delivery_methods[type="radio"]:disabled:not(:checked) + label:before, input.delivery_methods[type="radio"]:disabled:checked + label:before, input.time-radio[type="radio"]:disabled:not(:checked) + label:before, input.time-radio[type="radio"]:disabled:checked + label:before { box-shadow: none; border-color: #bbb; background-color: #ddd; } input.delivery_methods[type="radio"]:disabled:checked + label:after, input.time-radio[type="radio"]:disabled:checked + label:after { color: #999; } input.delivery_methods[type="radio"]:disabled + label, input.time-radio[type="radio"]:disabled + label { color: #aaa; } input.delivery_methods[type="radio"]:checked + label { color: #000 !important; font-weight: 600 !important; } .choinfoblock .control-group .control-label { width: 30%; } .choinfoblock .control-group .control-label + div, .row.delivery-group .delivdata { width: 70%; padding-left: 10px; } .row.delivery-group .control-label { width: 30%; padding-right: 0; } .o-date, .choose-time { display: inline-block; width: 10px; height: 10px; margin-right: -2px; } .o-date { background: url(../images/date-icon.png) no-repeat; } .choose-time { background: url(../images/clock-ico.png) no-repeat; } .c-date, .time-range__wrap { display: inline-block; background: #f6f6f6; padding: 3px 10px; border-radius: 3px; -moz-border-radius: 3px; } .o-time { display: inline-block; } .ch-time, .del-link { display: inline-block; line-height: 12px; color: #969595 !important; cursor: pointer; } .day, .date { color: #656565; display: inline-block; line-height: 1.5; cursor: pointer; } .ch-time::after { display: inline-block; content: ''; border-bottom: 1px dotted #656; height: 1px; width: 100%; float: left; } .under-line { display: block; border-bottom: 1px dotted #656; position: relative; top: -5px; width: 50px; margin-left: 14px; } .day::after { display: inline-block; content: ''; border-bottom: 1px dotted #656; height: 1px; width: 100%; float: left; position: relative; } .date::after { display: inline-block; content: ''; border-bottom: 1px dotted #656; height: 1px; width: 100%; float: left; position: relative; } .del-link { padding-bottom: 1px; border-bottom: 1px dotted #969595; } .del-link { position: relative; left: 20px; top: -7px; } .time-range__wrap { position: relative; } /*.change-time + .time-range__tooltip { display: block; } .no-change-time + .time-range__tooltip { display: none; }*/ .dnone { display: none; } .cal { dispaly: block; } .c-date input[type="button"] { border: 1px solid transparent; background: none; padding-left: 0; color: #656565; } .choose-date { line-height: 21px; } .time-range__tooltip { border: 1px solid #969595; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding-left: 10px; position: absolute; left: 115px; top: -5px; background-color: #f6f6f6; width: 110px; list-style: none; z-index: 4; /*box-shadow: 0px 2px 5px rgba(0,0,0,0.3);*/ } .time-range__tooltip::before { content: ""; left: -16px; top: 7px; position: absolute; border: 9px solid transparent; border-right: 8px solid #f6f6f6; z-index: 6; } .time-range__tooltip::after { content: ""; position: absolute; border: 8px solid transparent; border-right: 7px solid #969595; z-index: 5; left: -16px; top: 8px; } .time-range__selected { cursor: pointer; } .time-range__selected { padding-bottom: 1px; border-bottom: 1px dotted #969595; color: #969595; } /*modal choose time*/ .ch-time__modal { padding: 5px 10px; display: none; overflow: hidden; border: 1px solid #e0e0e0; background: #f6f6f6; width: 102px; position: absolute; top: 65px; right: -25px; border-radius: 3px; -moz-border-radius: 3px; -webkit-bordfer-radius: 3px; } .ch-time__modal::before { content: ''; position: absolute; /* Абсолютное позиционирование */ left: -19px; bottom: 83px; border: 10px solid transparent; border-right: 10px solid #f6f6f6; z-index: 6; } .ch-time__modal::after { content: ''; position: absolute; /* Абсолютное позиционирование */ left: -21px; bottom: 82px; border: 11px solid transparent; border-right: 11px solid #e0e0e0; z-index: 5; } .ch-time__wrapcontent { position: relative; } .hasDatepicker { display: initial; } @media only screen and (min-device-width: 320px) and (max-device-width: 600px) and (orientation: portrait) { .choinfoblock { padding: 15px 10px 10px; } .choinfoblock .control-label { margin-bottom: 2px; } .choinfoblock input[type="text"], .choinfoblock input[type="email"], .choinfoblock textarea, .choinfoblock select { margin-bottom: 0; } .delivery-group .control-label { width: 100%; } .delivery-group .delivdata { width: 100%; } .chotab_content .delivery .delivery__row:nth-of-type(1) { display: none; } .delivery__cell { float: left; } /*.mobile .column-2 { display: none; }*/ /*.data-range-mobile { display: block !important; width: 100%; float: left; }*/ .open-calendar, .time-range__wrap { display: inline-block; } .column-3 { display: none; } .column-1a { display: block; } .delivery__cell { padding: 5px 7px 5px 0; } .column-1 { width: auto; } .column-2 { width: 100%; } .time-range__wrap { /*float: right;*/ /*padding-right: 10%;*/ margin-left: 2%; } .open-calendar { padding-left: 7%; } .day::after, .date::after { display: none; } .column-1 { /*width: 150px;*/ width: 70%; } .del-link { top: 0; } .del-link::after { display: none; } .time-range__tooltip { top: 36px; left: 0; } .time-range__tooltip::before { left: 45px; top: -20px; border-right: none; border: 10px solid transparent; border-bottom: 10px solid #f6f6f6; } .time-range__tooltip::after { border: 11px solid transparent; border-bottom: 11px solid #969595; left: 44px; top: -22px; } .main-column { padding-left: 10px; padding-right: 10px; } .choinfoblock { overflow: hidden; } .row.control-group { margin-left: 0; margin-right: 0; } #order_form .control-label { padding-left: 0; padding-right: 0; } .choinfoblock, .choinfoblock .control-group .control-label { width: 100%; } .choinfoblock .control-group .control-label + div, .row.delivery-group .delivdata { width: 100%; padding: 0; } .choinfoblock.chosubmission { padding: 10px; } .choinfoblock.chosubmission .control-group > .control-label { display: none; } .choinfoblock.chosubmission .control-group > .control-label + div > label { padding-top: 0; margin-top: -20px; } #order_form .chosubmission label { display: inline; margin-left: -20px; } .offer__inner { margin-left: 3px; } .br-oi { display: inline-block !important; } .chosubmission .form-actions input[type="submit"] { margin-bottom: 0; margin-top: 15px; left: 0; } .row.delivery-group { margin-left: 0; margin-right: 0; } .chotab_item { margin-left: 0 !important; margin-right: 0 !important; } #order_form input[type="text"], #order_form input[type="email"], #order_form textarea, #order_form select { margin-bottom: 5px; } } @media only screen and (min-width: 1024px) { .delivery__table { width: 100%; } .time-range__wrap { top: -8px; left: 0; } .column-1a { display: none; } .del-link::after, .day::after, .date::after { display: inline-block; } .open-calendar { padding-left: 0; } } .delivery-group .control-label { font-size: 12px; color: #656565; } .type_pay__sub-info { font-size: 8pt; color: grey; line-height: 12px; } .paytypes .type-pay { line-height: 16px; margin-bottom: -2px; } .choinfoblock.paytypes { padding: 10px 30px 10px 20px; } .paytypes .control-group { margin-top: -5px; } .type-pay__inner { font-size: 10pt; color: #303030; } .choinfoblock.chosubmission .control-group > .control-label { display: none; } .rules_ofert { text-decoration: underline; padding-left: 5px; } .choinfoblock.chosubmission .control-group .control-label + div { width: 100%; } .br-oi { display: none; } .chotab_item { border-top: 1px solid #e0e0e0; margin-top: 10px; padding-top: 10px; margin-left: 10px; margin-right: 10px; } .chotabs > .chotab.pick_upcho:first-child { display: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <div class="chotab_content"> <div class="delivery radio"> <div class="delivery__table"> <div class="delivery__row"> <div class="delivery__cell h_row column-1">Способы доставки</div> <div class="delivery__cell h_row column-2">Сроки доставки</div> <div class="delivery__cell h_row column-3">Стоимость</div> </div> <div class="empty__row"> </div> <div class="delivery__row"> <div class="delivery__cell column-1"> <input id="select__delivery-k" class="delivery_methods" name="delivery" type="radio"> <label for="select__delivery-k">Доставка 1</label> </div> <div class="delivery__cell column-1a"> 250 руб. </div> <div class="delivery__cell column-2"> <div class="open-calendar"> <a class="c-date"> <i class="o-date"></i> <input class="choose-date" type="button" value="Сегодня"> <div class="under-line"></div> </a> </div> <div class="time-range__wrap"> <div class="time-range"> <i class="choose-time"></i> <span class="time-range__selected">Выбрать время</span> </div> <ul class="time-range__tooltip dnone"> <li> <input name="delivery-time-range" id="time-select-1" class="time-radio" type="radio"> <label for="time-select-1">10.00-18.00</label> </li> <li> <input name="delivery-time-range" id="time-select-2" class="time-radio" type="radio"> <label for="time-select-2">18.00-21.00</label> </li> <li> <input name="delivery-time-range" id="time-select-3" class="time-radio" type="radio"> <label for="time-select-3">10.00-15.00</label> </li> <li> <input name="delivery-time-range" id="time-select-4" class="time-radio" type="radio"> <label for="time-select-4">14.00-18.00</label> </li> <a class="close_tooltip">закрыть</a> </ul> </div> </div> <div class="delivery__cell column-3"> 250 руб. </div> </div> <div class="delivery__row"> <div class="delivery__cell column-1"> <input id="select__delivery-s" class="delivery_methods" name="delivery" type="radio"> <label for="select__delivery-s">Доставка 2</label> </div> <div class="delivery__cell column-1a"> 500 руб. </div> <div class="delivery__cell column-2"> <div class="open-calendar"> <a class="c-date"> <i class="o-date"></i> <input class="choose-date" type="button" value="Сегодня"> <div class="under-line"></div> </a> </div> <div class="time-range__wrap"> <div class="time-range"> <i class="choose-time"></i> <span class="time-range__selected" href="">Выбрать время</span> </div> <ul class="time-range__tooltip dnone"> <li> <input name="delivery-time-range" id="time-select-5" class="time-radio" type="radio"> <label for="time-select-5">10.00-18.00</label> </li> <li> <input name="delivery-time-range" id="time-select-6" class="time-radio" type="radio"> <label for="time-select-6">18.00-21.00</label> </li> <li> <input name="delivery-time-range" id="time-select-7" class="time-radio" type="radio"> <label for="time-select-7">10.00-15.00</label> </li> <li> <input name="delivery-time-range" id="time-select-8" class="time-radio" type="radio"> <label for="time-select-8">14.00-18.00</label> </li> <a class="close_tooltip">закрыть</a> </ul> </div> </div> <div class="delivery__cell column-3"> 500 руб. </div> </div> <div class="delivery__row svz"> <div class="delivery__cell column-1"> <input id="select__delivery-sv" class="delivery_methods" name="delivery" type="radio"> <label for="select__delivery-sv">доставка3</label> <a class="chotab pick_upcho del-link where-to-get">Выбрать магазин</a> </div> <div class="delivery__cell column-1a"> Бесплатно </div> <div class="delivery__cell column-2"> <div class="open-calendar"> <a class="c-date"> <i class="o-date"></i> <input class="choose-date" type="button" value="Сегодня"> <div class="under-line"></div> </a> </div> </div> <div class="delivery__cell column-3"> Бесплатно </div> </div> <div class="delivery__row"> <div class="delivery__cell column-1"> <input id="select__delivery-pvz" class="delivery_methods" name="delivery" type="radio"> <label for="select__delivery-pvz">Доставка 4</label> <a class="chotab pick_upcho del-link where-to-get">Выбрать ПВЗ</a> </div> <div class="delivery__cell column-1a"> от 90 руб </div> <div class="delivery__cell column-2"> <div class="open-calendar"> <a class="c-date"> <i class="o-date"></i> <input class="choose-date" type="button" value="Сегодня"> <div class="under-line"></div> </a> </div> </div> <div class="delivery__cell column-3"> от 90 руб. </div> </div> </div> </div> </div> </body> </html> 
