javascript - 复选框未显示为已选中

Question

我在 html 中有以下代码

 <div class="ft_ck_area" id="fromFirstHalf">
                        <div class="cb">
                            <input type="radio" class="css-checkbox" id="fromFirstHalfChk" name="fromChkValue" value="1"/>
                            <label for="fromFirstHalfChk" name="checkbox1_lbl" class="css-label">First Half</label>
                        </div>

                    </div>
                    <div class="ft_ck_area"  id="fromSecondHalf">
                        <div class="cb">
                            <input type="radio" class="css-checkbox" id="fromSecondHalfChk" name="fromChkValue" value="2"/>
                            <label for="fromSecondHalfChk" name="checkbox1_lbl" class="css-label">Second Half</label>
                        </div>
                    </div>
                    <div class="ft_ck_area" id="fromFullDay">
                        <div class="cb">
                            <input type="radio" class="css-checkbox" id="fromFullDayChk" name="fromChkValue" value="0"/>
                            <label for="fromFullDayChk" name="checkbox1_lbl" class="css-label">Full Day</label>
                        </div>
                    </div>



<div class="ft_ck_area" id="toFirstHalf">
                        <div class="cb">
                            <input type="radio" class="css-checkbox" id="toFirstHalfChk" name="toChkValue"  value="1"/>
                            <label for="toFirstHalfChk" name="checkbox1_lbl" class="css-label">First Half</label>
                        </div>
                    </div>
                    <div class="ft_ck_area" id="toSecondHalf">
                        <div class="cb">
                            <input type="radio" class="css-checkbox" id="toSecondHalfChk"  name="toChkValue" value="2"/>
                            <label for="toSecondHalfChk" name="checkbox1_lbl" class="css-label">Second Half</label>
                        </div>
                    </div>
                    <div class="ft_ck_area" id="toFullDay">
                        <div class="cb">
                            <input type="radio" class="css-checkbox" id="toFullDayChk" name="toChkValue" value="0"/>
                            <label for="toFullDayChk" name="checkbox1_lbl" class="css-label">Full Day</label>
                        </div>
                    </div>

在javascript中，我在从复选框中删除选中的属性后执行以下代码，如果我在html中看到它但它没有显示为选中，则它会附加在html中，

       if (dateDiff == 0) {
                var fromCheckedId=$('input[name=fromChkValue]:checked').attr("id");
                $("#"+fromCheckedId).removeAttr("checked");
                console.log("1");
                console.log("#"+fromCheckedId);
                var toCheckedId=$('input[name=toChkValue]:checked').attr("id");
                $("#"+toCheckedId).removeAttr("checked");
                console.log("2");
                console.log("#"+toCheckedId);
                $("#fromFullDayChk").attr("checked","checked");
                }
                else
                {
                    var fromCheckedId=$('input[name=fromChkValue]:checked').attr("id");
                $("#"+fromCheckedId).removeAttr("checked");
                console.log("3");
                console.log("#"+fromCheckedId);
                var toCheckedId=$('input[name=toChkValue]:checked').attr("id");
                $("#"+toCheckedId).removeAttr("checked");
                console.log("4");
                console.log("#"+toCheckedId);
                $("#fromFullDayChk").attr("checked","checked");
                $("#toFullDayChk").attr("checked","checked");
                }

这段代码有什么问题？删除属性后，我再次添加了属性

Answer 1

使用这个

  $("#fromFullDayChk").attr("checked",true);

而不是

$("#fromFullDayChk").attr("checked","checked");

如果您使用的是最新版本的 Jquery，请使用 prop，如下所示:

$("#fromFullDayChk").prop("checked",true);