Question

我需要执行以下操作：

http://deinehelfer24.de/renovierungen/

据我了解，这是在联系表格7上完成的，但是如何实现图像和多项选择呢？

Answer 1

今天我很慷慨，例如可以为标签添加样式的简单例子

https://jsfiddle.net/Beneris/65mdtpo3/28/

HTML

<form>

  <div class="input-group">
    <div class="input-wrap">
      <input type="radio" name="group1" id="group1-1" value="1">
      <label for="group1-1">
        <figure><img src="http://placekitten.com/g/100/100"><h3>Radio 1</h3></figure>
      </label>
    </div>
    <div class="input-wrap">
      <input type="radio" name="group1" id="group1-2" value="2">
      <label for="group1-2">
        <figure><img src="http://placekitten.com/g/100/100"><h3>Radio 2</h3></figure>
      </label>
    </div>
    <div class="input-wrap">
      <input type="radio" name="group1" id="group1-3" value="3">
      <label for="group1-3">
        <figure><img src="http://placekitten.com/g/100/100"><h3>Radio 3</h3></figure>
      </label>
    </div> 
  </div>

  <div class="input-group">
    <div class="input-wrap to-toggle 1 3">
      <input type="checkbox" name="group2" id="group2-1" value="1">
      <label for="group2-1">
        <figure><img src="http://placekitten.com/g/100/100"><h3>checkbox 1</h3></figure>
      </label>
    </div>
    <div class="input-wrap to-toggle 1 2">
      <input type="checkbox" name="group2" id="group2-2" value="2">
      <label for="group2-2">
        <figure><img src="http://placekitten.com/g/100/100"><h3>checkbox 2</h3></figure>
      </label>
    </div>
    <div class="input-wrap to-toggle 1 2 3">
      <input type="checkbox" name="group2" id="group2-3" value="3">
      <label for="group2-3">
        <figure><img src="http://placekitten.com/g/100/100"><h3>checkbox 3</h3></figure>
      </label>
    </div> 
  </div>

</form>

CSS

.radio-group {
  display:block;
}

.input-group .input-wrap{
  display:inline-block;
  vertical-align: top;
  padding: 10px;
}

label figure {
  background-color: #ccc;
  padding: 5px 10px;
  border-radius: 0 0 5px 5px;
  cursor: pointer;
}

figure h3 {
  text-align: center;
}

.input-group input:checked ~ label figure {
  background-color: red;
}

.input-wrap input {
  display:none;
}

JS

$('.to-toggle').hide();
$('input[name=group1]').on('change', function(){
    var val = $(this).val();
  $('.to-toggle').hide();
  $('.to-toggle input').prop('checked', false);
  $('.to-toggle.' + val).show();
  //alert(val);
});

如何在带有图像的联系表7中进行多项选择？

1 个答案: