JSFiddle - React, Tailwind, and code Playground
HTML
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">藥品</h3> <div class="result-number"> 16 筆</div>
<button class="sync btn btn-primary btnsync" id="sync">全部同步</button>
<button class="save btn btn-primary btnsaveall" id="save">全部儲存</button>
<div>
<div class="icheck-row input-group-others">
<label>
<input type="radio" name="fnrdo" value="N" />
未給藥
</label>
<label>
<input type="radio" name="fnrdo" value="Y" />
已給藥
</label>
<label>
<input type="radio" name="fnrdo" value="D" />
延遲
</label>
原因: <input type="text" name="finput" id="finput" /><br />
</div>
</div>
</div><!-- /.box-header -->
<div class="box-body">
<table id="dataTableDrug" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th style="width:8%">醫囑日期</th>
<th style="width:25%">名稱</th>
<th style="width:5%">劑量</th>
<th style="width:5%">單位</th>
<th style="width:5%">頻率</th>
<th style="width:5%">天數</th>
<th style="width:5%">途徑</th>
<th style="width:5%">總量</th>
<th style="width:5%">單位</th>
<th class="table-col-func">功能</th>
</tr>
</thead>
...
JavaScript
$('.fn-edit').click(function(){
var guid = $(this).attr('data-guid')
console.log(guid)
})
$('#save').click(function(){
$('#dataTableDrug>tbody>tr').each(function(){
var rowStatus = $(this).find('input[type="radio"]:checked').val()
var rowSaveBtn = $(this).find('.fn-edit')
if (rowStatus == "Y"){
rowSaveBtn.trigger('click')
}
})
})
$('#sync').click(function(){
var eachRowStatus = $('input[name="fnrdo"]:checked').val()
$('#dataTableDrug>tbody>tr').each(function(){
$(this).find('input[type="radio"]').each(function(){
if ($(this).val() == eachRowStatus){
$(this).prop('checked', true)
}
})
})
})