скрыть chekbox, выделить выделенные пикеты

Я хотел бы спрятать chekboxes в моем и заменить их фотографиями. На данный момент у меня уже есть фотографии, но я также хотел бы скрыть сам check3box. если выбрана одна из картин, она должна получить выделенную границу. Я был бы очень рад за любую помощьскрыть chekbox, выделить выделенные пикеты

вот моего текущего код формы

<form type="post" action="photoselection.php"> 
      <div id="photowrapper"> 

       <div class="photo"> 
        <input type="checkbox" value="" name="bild1"> 
        <label class="label_item" for="rbild1"><img src="bild1.jpg"/></label> 
       </div> 
       <div class="photo"> 
        <input type="checkbox" value="" name="bild2" id="rbild2"> 
        <label class="label_item" for="rbild2"><img src="bild2.jpg"/></label> 
       </div> 
       <div class="photo"> 
        <input type="checkbox" value="" name="bild3" id="rbild3"> 
        <label class="label_item" for="rbild3"><img src="bild3.jpg"/></label> 
       </div> 
       <div class="photo"> 
        <input type="checkbox" value="" name="bild4" id="rbild4"> 
        <label class="label_item" for="rbild4"><img src="bild4.jpg"/></label> 
       </div> 
       <div class="photo"> 
        <input type="checkbox" value="" name="bild5" id="rbild5"> 
        <label class="label_item" for="rbild5"><img src="bild5.jpg"/></label> 
       </div> 
       <div class="photo"> 
        <input type="checkbox" value="" name="bild6" id="rbild2"> 
        <label class="label_item" for="rbild2"><img src="bild2.jpg"/></label> 
       <Input type = "Submit" Name = "Submit" VALUE = "Bild anzeigen"> 
       </div> 
      </div> 
      </form>

источник

2015-07-08 Econ

отсутствует тег. Я думаю, что 'javascript' или' jQuery' могут делать то, что вы хотите. – roullie

Что сказал Рулли, я бы порекомендовал jQuery, один из способов сделать это будет использовать '$ ('. Checkbox'). Click (function() {', а затем используйте 'this.hide();' - Или что-то (я бы рекомендовал применить класс для наблюдателя jQuery, а затем использовать 'this', чтобы идентифицировать флажок, вызывающий/запускающий jQuery. – Epodax

You can do it using CSS 
<style> 

.photo > input{ 
display:none; 
} 

.photo > input:checked + label > img{ 
border: 3px solid black; 
} 

</style>

Надеется, что он должен работать

источник

2015-07-08 07:04:29

спасибо mate! Это сработало отлично, это точно, что я хотел – Econ

Если это сработало пожалуйста, отметьте ответ «Принято», чтобы следующий раз. Если у кого-то такая же проблема, он знает, какой ответ он может использовать напрямую. –

уверен, извините, мой первый вопрос здесь, не думал об этом, но это сделано теперь – Econ

Как я уже сказал в своем комментарии (и как @roullie упоминались), один способ сделать это с помощью jQuery/JS, простой способ скрыть эти флажки состоял бы в следующем:

jQuery пример:

$(document).ready(function() { 
    $(".checkbox").click(function() { 
     $(this).hide(); 
    }); 
});

А затем примените класс флажка к любому из флажков, которые вы хотите скрыть, когда изображение отображается.

Это также можно использовать, чтобы снова показать флажок или добавить другую логику, которая будет выполняться при показе изображения.

источник

2015-07-08 07:05:56 Epodax

спасибо, но так, как сказал дантон, на самом деле для меня намного проще – Econ

@Econ Конечно :) Не забудьте отметить его вопрос как «Принятый», если он сделал трюк для вас. – Epodax

О, я бы забыл это. – Econ

Используйте свое изображение как фоновое изображение и с помощью обложки вы можете скрыть флажок. Работает также с радио-кнопки (с небольшим добавлением)

//HTML 
<div class="checkbox"> 
    <input id="check" value="" name="check" checked="checked" type="checkbox"> 
    <label for="check"></label> 
</div> 

//CSS: 
.checkbox input[type="checkbox"] { 
    display: none; 
} 

.checkbox input[type="checkbox"] + label { 
    display: block; 
    float: left; 
    border: 1px solid grey; 
    width: 100px; 
    height: 50px; 
    background: transparent url("https://placehold.it/100x50/4DA61F") no-repeat scroll 0 0; 
} 

.checkbox input[type="checkbox"]:checked + label { 
    border: 1px solid darkred; 
    background: transparent url("https://placehold.it/100x50/F3C914") no-repeat scroll 0 0; 
}

JSFiddle Example 1

Здесь второе решение с встроенного изображения:

//HTML 
<div class="checkbox"> 
    <input id="check" value="" name="check" type="checkbox"/> 
    <label for="check"> 
     <img src="https://placehold.it/100x50/deff00" alt=""/> 
    </label> 
</div> 

//CSS 
.checkbox input[type="checkbox"] { 
    display: none; 
} 

.checkbox input[type="checkbox"] + label { 
    display: block; 
    float: left; 
    font-size: 0; 
    border: 2px solid #f4f4f4; 
} 

.checkbox input[type="checkbox"]:checked + label { 
    border: 2px solid red; 
}

JSFiddle Example 2

источник

2015-07-08 07:55:43 AlexG

скрыть chekbox, выделить выделенные пикеты

ответ

Смежные вопросы