Question

我正在制作一些复选框样式，但iCheck有一些问题与我的控制，我决定制作我自己的iCheck。我需要什么，我有这个元素

<input type="checkbox" class="vvCheck">
<input type="radio" class="vvCheck">

使用jquery我想要不像这样做

复选框

<label class="checkbox">
  <input type="checkbox" class="vvCheck">
  <i></i>
</label>

对于电台

<label class="radio">
  <input type="radio" class="vvCheck">
  <i></i>
</label>

我可以在一个功能中制作，只需像这样调用

vvCheck();

Txanks

这是工作小提琴 http://jsfiddle.net/yxwvn9at/

Answer 1

您可以使用.wrap（）之类的

function vvCheck() {
  $('.vvCheck[type="checkbox"]').wrap('<label class="checkbox" />').after('<i />')
  $('.vvCheck[type="radio"]').wrap('<label class="radio" />').after('<i />')
}
vvCheck();

label.checkbox {
  border: 1px solid green;
}
label.checkbox i {
  height: 10px;
  display: inline-block;
  width: 10px;
  background: red;
}
label.radio {
  border: 1px solid blue;
}
label.radio i {
  height: 10px;
  display: inline-block;
  width: 10px;
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="vvCheck">
<input type="radio" class="vvCheck">

Answer 2

试试这个：

function vvCheck() {
    var liInsideLabel = '<li></li>';
    var radioLabel = '<label class="radio"></label>';   
    var checkboxLabel = '<label class="radio"></label>';

    $('input[type=radio].vvCheck').each(function(){
      $(this).wrap(radioLabel).after(liInsideLabel);      
     });

    $('input[type=checkbox].vvCheck').each(function(){
      $(this).wrap(checkboxLabel).after(liInsideLabel);       
    });
}

<强> JSFiddle DEMO

标签中的Jquery包装元素？

2 个答案: