时间戳

首页 > 解决方案 > 旁边的可链接图标

问题描述

标签： jquerycsstwitter-bootstrap

解决方案

这是使用单选按钮的粗略版本。按钮通过 css 隐藏，标签是用户的实际界面。

然后，您仍然可以通过单选按钮的名称获得表单元素。

//This is a better way to wire up your event handler
//instead of inline javascript
var radios = document.querySelectorAll(".selctRadio input[type=radio]");
for(i = 0; i < radios.length; i++)
{
  radios[i].addEventListener("click", submitForm);
}

//Just to demo the handler, put/change your logic here
function submitForm(){
  console.log(this.name + " : " + this.value);
}
/*Style the list*/
.selctRadio {
  list-style: none;
  padding-left: 0;
}

/*Hide the radio button*/
.selctRadio input[type=radio] {
  display: none;
}

/*Style the select*/
.selctRadio label {
  display: block;
}

/*Add some styling when checked*/
.selctRadio input[type=radio]:checked~label {
  background-color: #CCC;
}

/*Set the list item to relative*/
.selctRadio {position:relative;}

/*So we can absolutely position the icon relative to it*/
.selctRadio .fa-film{
  position:absolute;
  right:0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<p>Pay
<i class="fa fa-apple-pay"></i>
</p>
<div class="card">
  <div class="card-header" id="heading67765">
    <h2 class="mb-0">
      <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse67765" aria-expanded="true" aria-controls="collapse67765">
          a_format
        <strong>210 x 75 mm</strong></button>
      <span class="fa fa-code pull-right" data-container="body" data-toggle="popover" data-placement="left" data-html="true" data-content="" style="font-size: 16pt; margin-top: 10px;" data-original-title="" title=""></span>
    </h2>
  </div>
  <div id="collapse67765" class="show*********** collapse show" aria-labelledby="heading67765" data-parent="#accordionExample" style="">
    <div class="card-body">
      <ul class="selctRadio">
        <!-- Note the relationship between "id" on the input and "for" on the label -->
        <li><input type="radio" name="a_format" value="A_52_x_74_mm_DIN-A-8" id="A_52_x_74_mm_DIN-A-8"><label for="A_52_x_74_mm_DIN-A-8">52 x 74 mm A8</label></li>
        <li><input type="radio" name="a_format" value="A_74_x_105_mm_DIN-A-7" id="A_74_x_105_mm_DIN-A-7"><label for="A_74_x_105_mm_DIN-A-7">74 x 105 mm A7</label>
</li>
        <li><input type="radio" name="a_format" value="A_210_x_75_mm" id="A_210_x_75_mm" checked><label for="A_210_x_75_mm">210 x 75 mm</label></li>
      </ul>
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header" id="heading67765">
    <h2 class="mb-0">
      <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse67765" aria-expanded="true" aria-controls="collapse67765">
          a_format
        <strong>210 x 75 mm</strong></button>
      <span class="fa fa-code pull-right" data-container="body" data-toggle="popover" data-placement="left" data-html="true" data-content="" style="font-size: 16pt; margin-top: 10px;" data-original-title="" title=""></span>
    </h2>
  </div>
  <div id="collapse67765" class="show*********** collapse show" aria-labelledby="heading67765" data-parent="#accordionExample" style="">
    <div class="card-body">
    
      <ul class="selctRadio">
        <li><input type="radio" name="a_paper" value="A_90gqm_Bilderdruck" id="A_90gqm_Bilderdruck"><label for="A_90gqm_Bilderdruck">90 gsm Coated art paper</label></li>
        <li><input type="radio" name="a_paper" value="A_115gqm_Bilderdruck" id="A_115gqm_Bilderdruck"><label for="A_115gqm_Bilderdruck">115 gsm Coated art paper</label><a href="https://www.youtube.com" class="fa fa-film"></a></li>
        <li><input type="radio" name="a_paper" value="A_130gqm_Bilderdruck" id="A_130gqm_Bilderdruck"><label for="A_130gqm_Bilderdruck">130 gsm Coated art paper</label></li>
      </ul>    
    </div>
  </div>
</div>

推荐阅读