首页 | 9811 | 597 | 298 | 添加收藏 上一个 下一个
jQuery伪单选与复选(原创)

介绍:


传统的复选与单选组件通常是与,虽然现代游览器引擎已经支持对这些控件美化,但往往丰富的页面场景急需超出单选/复选概念单选/复选组件,无论是图片还是视频都能作为单选内容呈现在场景中。


inpitassembly下包含二个版本,分别是inpitassembly1.4和inpitassembly2.0;


使用方法


首先你需要创建一个标签,声明type=”inpit/assembly”,现在该标签将作为控件容器,在容器下放置组件,type=”inpit/assembly”中含二种组件,它们分别是单选与复选组件。


你需要在容器下方的标签声明checkbox或radio,列如这样:


//单选
<div class="li" checkbox>
 <div class="ack" name="b" value="B-a">
  单选A
 </div>
 <div name="b" value="B-b">
  单选B
 </div>
</div>
//复选
<div class="li" radio>
 <div name="c" value="A">
  复选A
 </div>
</div>

那么此区域下子DIV将作为单选或是复选选项;但千万别忘记单选的默认选项,你仅仅为它添加一个类(.ack)即可。


直到这里,type=”inpit/assembly”骨架已经完成,为了让type=”inpit/assembly”知道选择的值以及是否同一区域内,你必须为选项提供二个声明name与value,name则表示同一个区域,如果不声明type=”inpit/assembly”将视为新的单选/复选表单,value则表示选中取的值。


现在让我们实验在同一组件内,声明不同name会发生什么::


//单选
<div class="li" checkbox>
  <div class="ack" name="a" value="B-a">
    单选A
  </div>
  <div name="a" value="B-b">
    单选B
  </div>
  <div name="b" value="B-c">
    单选C
  </div>
  <div name="c" value="B-d">
    单选D
  </div>
</div>

我们可以看到单选A和单选B作为仅有其中之一,而单选C与单选D作为一个新的单选表单.


复选组件的MIN和MAX


现在你可以为你的复选规定最小值和最大值,你仅仅在声明radio前添加min=””或max=“”,但你必须注意min和max不要相等


//复选
<div class="li" min="1" max="2" radio>
  <div class="ack" name="a" value="A-a">
    单选A
  </div>
  <div name="a" value="A-b">
    单选B
  </div>
  <div name="a" value="A-c">
    单选C
  </div>
  <div name="a" value="A-d">
    单选D
  </div>
</div>

inpit/assembly的初始


在这里inpit/assembly提供了一个初始值,如果radio或checkbox都没有选择一个选项作为初始值,那么作为表单可能出现意外,因此radio设置min,那么会初始选项,如果radio的min为3,那么会初始前3个选项;checkbox则初始第一个。


如果你不希望这样,你可以对ischeck_设置为false(关闭初始值)。


获取


现在为了获取inpit/assembly的选项值,你需要设置check_result()方法即可返回所有选中值,记住你必须向check_result()传递$(this)


$("[type='inpit/assembly']").find("button").click(function(){
  var val = check_result($(this));
  alert([val]);
   console.log(val)
})

多个type=’inpit/assembly’


你将可以在页面上共存多个inpit/assembly,但你必须注意几个要点:



  1. inpit/assembly内不能再创建一个inpit/assembly,你需要避免这样的设定

  2. 规定了组件name仅仅区分inpit/assembly域,如果不同域之间下选项name值如果还是相等,那么它依旧认为在同一选择表单中,当然inpit/assembly是故意保留这样设定。你仅仅为选项的name命名新值即可