layui獲取checkbox選中值詳解

一、基礎知識

Checkbox是一種常用的表單元素，是一種多選組件。在layui框架中，使用Checkbox組件需要引入form模塊。下面是一個Checkbox的基本示例：

<form class="layui-form">
  <div class="layui-form-item">
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="寫作">
      <input type="checkbox" name="like[read]" title="閱讀">
      <input type="checkbox" name="like[dai]" title="發獃">
    </div>
  </div>
</form>

Checkbox的name屬性值應該設置為一個數組，這樣選中的值才能夠組成一個數組傳遞給後台。title屬性用於展示選項的名稱。

二、獲取選中值

在layui中，獲取Checkbox選中值需要使用form模塊里的一些方法。可以通過監聽form的submit事件，觸發回調函數，在回調函數里獲取選中值。下面是一個示例：

//HTML代碼
<form class="layui-form">
  <div class="layui-form-item">
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="寫作">
      <input type="checkbox" name="like[read]" title="閱讀">
      <input type="checkbox" name="like[dai]" title="發獃">
    </div>
  </div>
  <button lay-submit lay-filter="formDemo">提交</button>
</form>

//JS代碼
layui.use('form', function(){
  var form = layui.form;

  //監聽提交
  form.on('submit(formDemo)', function(data){
    console.log(data.field.like); //獲取選中的值
    return false; //阻止表單跳轉
  });
}); 

在回調函數中，可以通過data.field來獲取選中的值，其中“like”是Checkbox的name屬性值。此時，data.field.like為一個數組，包含了選中的所有值。如果需要遍歷選中值，可以使用for循環：

form.on('submit(formDemo)', function(data){
  var like = data.field.like;
  for(var i in like){
    console.log(like[i]); //遍歷選中的值
  }
  return false;
});

三、修改選中值

在實際開發中，有些情況下需要修改Checkbox的選中值，可以使用form模塊提供的方法去實現。下面是修改選中值的示例：

//HTML代碼
<form class="layui-form">
  <div class="layui-form-item">
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="寫作">
      <input type="checkbox" name="like[read]" title="閱讀">
      <input type="checkbox" name="like[dai]" title="發獃">
    </div>
  </div>
  <button id="setBtn">設置選中值</button>
  <button id="getBtn">獲取選中值</button>  
</form>

//JS代碼
layui.use('form', function(){
  var form = layui.form;
  
  //設置選中值
  $("#setBtn").click(function(){
    form.val('example', {
      'like[write]': true,
      'like[read]': true
    });
  });
  
  //獲取選中值
  $("#getBtn").click(function(){
    console.log(form.val('example').like);
  });
  
  form.render(); //刷新表單渲染
}); 

在上面的示例中，設置選中值需要使用form.val方法，其中第一個參數是表單的lay-filter屬性值。獲取選中值也使用了form.val方法，但不需要設置第二個參數。需要注意的是，修改選中值完成後需要調用form.render方法來刷新表單的渲染。

四、checkbox的其他屬性介紹

除了上面介紹的基本屬性之外，Checkbox還有其他一些可以修改的屬性。下面是這些屬性的介紹：

• lay-skin：設置Checkbox的風格樣式，如果不設置則為默認的複選框樣式。lay-skin的取值有：primary（原始風格）、switch（開關風格）、primary（多選風格）、checkbox（多選風格，點選即選）、radio（單選風格）。
• lay-filter：過濾器，用於表單事件的回調函數。（在獲取選中值時用到）
• lay-text：自定義文字，在label裡面設置自定義文字，可以在選項名前面添加幾個自定義的文字。
• lay-skin=”primary”的情況下，它還有lay-ignore屬性，可以讓它不提交。

下面是一個設置風格、過濾器和自定義文字的示例：

<form class="layui-form">
  <div class="layui-form-item">
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="寫作" value="write" lay-skin="primary" lay-filter="like">
      <input type="checkbox" name="like[read]" title="閱讀" value="read" lay-skin="primary" lay-filter="like">
      <input type="checkbox" name="like[dai]" title="發獃" value="dai" lay-skin="primary" lay-filter="like">
      <input type="checkbox" name="like[dai1]" title="發獃1" value="dai1" lay-skin="primary" lay-filter="like" lay-text="定時睡覺">
      <input type="checkbox" name="like[dai2]" title="發獃2" value="dai2" lay-skin="primary" lay-filter="like" lay-text="定時鍛煉">
    </div>
  </div> 
</form>

其中lay-filter用於事件回調，lay-text用於添加自定義文字。

五、總結

本文從基礎知識、獲取選中值、修改選中值、Checkbox的其他屬性等多個方面對layui獲取checkbox選中值做了詳細的闡述。希望能夠對使用layui框架的開發者有所幫助。