如何使用 jquery 从 api 响应中获取要检查的单选和复选框的正确值

Question

这是我的 Jquery：

   if (response) {
                $("#subterritory").val(response.subterritoyid);
                $("#user").val(response.assignedto);
                $("#startdate").val(response.startdate);
                $('input:checkbox[name="day"]').val(response.inspedays).prop('checked', true);
                 $('input:radio[name="duration"]').val(response.duration).prop('checked', true);
                 $('input:radio[name="repetitive"]').val(response.repetitive).prop('checked', true);

                 bulkId = response.id;

            }

首先，我要检查单选按钮和复选框，但是检查的内容和来自 Api 的响应是不同的。

我有不同的单选按钮和复选框，所以我使用 name 属性来获取值，但似乎检查了什么并且 Api 响应不同。

非常感谢有关如何正确检查正确的单选按钮和复选框的任何帮助。

这是我的html：

               <div class="controls">
                            <fieldset>
                                <label class="custom-control custom-checkbox">
                                    <input type="checkbox" value="monday" name="day" id="monday"  class="custom-control-input" ><span class="custom-control-label">Monday</span> </label>
                            </fieldset>
                            <fieldset>
                                <label class="custom-control custom-checkbox">
                                    <input type="checkbox" value="tuesday" name="day"id="tuesday" class="custom-control-input" ><span class="custom-control-label">Tuesday</span> </label>
                            </fieldset>
                            <fieldset>
                                <label class="custom-control custom-checkbox">
                                    <input type="checkbox" value="wednesday"  name="day" id="wednesday" class="custom-control-input" ><span class="custom-control-label">Wednesday</span> </label>
                            </fieldset>
                            <fieldset>
                                <label class="custom-control custom-checkbox">
                                    <input type="checkbox" value="thursday" name="day" id="thursday" class="custom-control-input" ><span class="custom-control-label">Thursday</span> </label>
                            </fieldset>
                            <fieldset>
                                <label class="custom-control custom-checkbox">
                                    <input type="checkbox" value="friday" name="day" id="friday" class="custom-control-input"><span class="custom-control-label">Friday</span> </label>
                            </fieldset>
                            <fieldset>
                                <label class="custom-control custom-checkbox">
                                    <input type="checkbox" value="saturday" name="day" class="custom-control-input"><span class="custom-control-label">Saturday</span> </label>
                            </fieldset>
                        </div>

 <div class="col-md-4" id="duration">
                    <div class="form-group">
                        <label class="control-label">Duration<span class="text-danger">*</span></label>
                        <div class="m-b-10">
                            <label class="custom-control custom-radio">
                                <input id="status-monthly" name="duration" type="radio" class="custom-control-input"value="monthly">
                                <span class="custom-control-label"  >Monthly</span>
                            </label>
                            <label class="custom-control custom-radio">
                                <input id="status-quaterly" name="duration" type="radio" class="custom-control-input" value="quaterly">
                                <span class="custom-control-label">Quaterly</span>
                            </label>
                            <label class="custom-control custom-radio">
                                <input id="status-biannually" name="duration" type="radio" class="custom-control-input" value="biannually">
                                <span class="custom-control-label">Bi-Annually</span>
                            </label>
                            <label class="custom-control custom-radio">
                                <input id="status-annually" name="duration" type="radio" class="custom-control-input" value="annually">
                                <span class="custom-control-label">Yearly</span>
                            </label>

                        </div>
                    </div>
                </div>

Api response and ui

Answer 1

要（取消）选中一个复选框，您不必使用只需更新（或获取）value="..." 属性的.val() 函数。

改为在选择器上设置查询值：

// Uncheck all days
$('input[type="checkbox"][name="day"]').prop('checked', false);
// Check only one day
$('input[type="checkbox"][name="day"][value="'+response.inspedays+'"]').prop('checked', true);

我也不确定$('input:checkbox') 是否有效，$('input[type="checkbox"]') 应该更好

---

编辑：这是一个示例，您要检查多天：

const days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']

// Example :
let response = { inspedays : "monday,wednesday,friday" }

let checked_days = response.inspedays.split(',') // transform string to array
days.forEach(day => {
  let is_day_checked = checked_days.indexOf(day) !== -1 // If day is in array
  $('input[type="checkbox"][name="day"][value="' + day 
 + '"]').prop('checked', is_day_checked);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="day" value="monday" /> Monday<br/>
<input type="checkbox" name="day" value="tuesday" /> Tuesday<br/>
<input type="checkbox" name="day" value="wednesday" /> Wednesday<br/>
<input type="checkbox" name="day" value="thursday" /> Thursday<br/>
<input type="checkbox" name="day" value="friday" /> Friday<br/>
<input type="checkbox" name="day" value="saturday" /> Saturday<br/> 
<input type="checkbox" name="day" value="sunday" /> Sunday<br/> 

/!\请注意，同名复选框不是一个好的做法，应该是唯一的。 你应该使用一些东西来代替（星期一）：

<input type="checkbox" name="day-monday" value="1" /> Monday<br/>

$('input[type="checkbox"][name="day- + day + '"]').prop('checked', is_day_checked);