使用jQuery移动的时无法自动选中复选框

pbpqsu0x  于 5个月前  发布在  jQuery
关注(0)|答案(1)|浏览(54)

我一直在尝试使用jQuery将一组复选框标记为选中。我似乎不能弄清楚为什么。
JavaScript:

function getProjects(course){

console.log("getProjects");
var data = {
  "fn" : "pLoad",
  "course" : course,
  "ajax" : "true"
};
$.ajax({
  type: "GET",
  url: SERVICE_URL, //Relative or absolute path to response.php file
  data: data,
  contentType: "application/json",
  success: function(response) {
    console.log("Recieved Projects!");
    console.log(response);
    var i, list = "";
        for (i = 0; i < response.length; i++) {
            var cid = "#" + response[i].name[0];
            console.log("setting checked: " + cid);
            console.log($(cid).length);
            $(cid).attr("checked");
        }
  }
});

}

字符串
超文本标记语言:

<td id="blockC" style="width:25%">
                <a href="#" id="expand" data-role="button" data-iconpos="notext" data-icon="arrow-l">Expand</a>
                <hr />
                
                <label for="core">Core</label>
                <input id="core" type="checkbox" value ="Core">
                
                <label for="adultScotland"> Adults(Scotland)</label>
                <input id="adultScotland" type="checkbox" value ="adultScotland">
                
                <label for="adultEngland">Adults(England)</label>
                <input id="adultEngland" type="checkbox" value ="adultsEngland">
                
                <label for="cFScotland"> Children and Families(Scotland)</label>
                <input id="cFScotland" type="checkbox" value ="cFScotland">
                
                <label for="cFEngland">Children and Families(England)</label>
                <input id="cFEngland" type="checkbox" value ="cFEngland">
                
                <label for="epilepsy"> Epilepsy</label>
                <input id="epilepsy" type="checkbox" value ="epilepsy">
                
                <label for="noCare">Non Care</label>
                <input id="noCare" type="checkbox" value ="noCare">
                
                <br />
                <hr />
                <br />
                    <form style="width:100%">
                    <input id="name" type="text" placeholder="Name" style="width:100%"/>
                    <input id="link" type="text" placeholder="Link" style="width:100%"/>
                    <a id="save" href="#" data-role="button">Save</a>
                    <a id="delete" href="#" data-role="button">Delete</a>
                    </form>
                </td>


通过这个脚本,我可以确认cid在每次运行脚本时都使用了有效的ID。这里的目标是,当我点击一个“课程”时,脚本将选中该课程所属项目的每个复选框。
日志告诉我服务器返回了正确的项目。
为什么不管用?

编辑

这是日志:


的数据

<head>
<title>Q learn App Edit</title>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">-->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>>
<script src="script.js"></script>
<style>
    table, th, td {
        border: 1px solid black;
    }
    td {
        padding: 15px;
    }
</style>
</head>

x7yiwoj4

x7yiwoj41#

经过以上评论,结论是:

$(cid).prop("checked", true);

字符串
如果它不起作用,并且您正在使用jQuery 1.6以下版本,请尝试:

$(cid).attr("checked","checked");


$(cid).attr("checked", true);


如果它不起作用(虽然它应该),就用纯js:

document.getElementById(response[i].name[0]).checked = true;

编辑

现在,OP提出这样一个问题是完全正确的,这就是为什么:
使用jQuery移动的1.4.4jQuery 1.11.0*,jQuery移动的编译器完全改变了文档的HTML结构!
简而言之,问题在于:
街区:

<label for="cFEngland">Children and Families(England)</label>
<input id="cFEngland" type="checkbox" value="cFEngland">


翻译成:

<div class="ui-checkbox">
   <label for="cFEngland" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Children and Families(England)</label>
   <input id="cFEngland" type="checkbox" value="cFEngland" data-cacheval="true">
</div>


现在,经过一些测试,你不能经常切换输入值,因为事实上,该复选框的样式是css相关的,而不是html或js相关的。
简而言之,基本上有两种状态:

状态1(复选框OFF):

<div class="ui-checkbox">
   <label for="cFEngland" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Children and Families(England)</label>
   <input id="cFEngland" type="checkbox" value="cFEngland">
</div>


它被渲染为这样的东西(在一个基本的小提琴):
x1c 0d1x的数据

状态2(复选框ON):

<div class="ui-checkbox">
   <label for="cFEngland" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-on">Children and Families(England)</label>
   <input id="cFEngland" type="checkbox" value="cFEngland" data-cacheval="false">
</div>


它被渲染为这样的东西(在一个基本的小提琴):



正如你所看到的,复选框没有任何状态,它的行为与它的属性“checked”没有任何关系。
为了解决这个问题,你必须做一些事情。

解决方案

现在,在继续之前,我想首先解释一个考虑因素:
因为你可能想,在未来(或者.嗯.也许只是现在!)获取该复选框的BOOLEAN值,我们将检查它并更改其checked属性。这是因为如果你实际上只是为jQuery移动的UI设置它为checked,如果你试图获取它的“checked属性”,它将不会被选中。
接下来,我实现了以下函数,以给予您一种更舒适的方式来使用该UI:

function setCheckboxStatus (id, status) {
    status == false ? $('#'+id).parent().find("label[for="+id+"]").removeClass("ui-checkbox-on").addClass("ui-checkbox-off") : $('#'+id).parent().find("label[for="+id+"]").removeClass("ui-checkbox-off").addClass("ui-checkbox-on");
    document.getElementById(id).checked = status;
}

function toggleCheckbox (id) {
    $('#'+id).parent().find("label[for="+id+"]").hasClass("ui-checkbox-on") ?$('#'+id).parent().find("label[for="+id+"]").removeClass("ui-checkbox-on").addClass("ui-checkbox-off") : $('#'+id).parent().find("label[for="+id+"]").removeClass("ui-checkbox-off").addClass("ui-checkbox-on");

    document.getElementById(id).checked ^= 1;
}

function getCheckboxStatus (id) {
 return $('#'+id).prop("checked");   
}


令人惊讶的是,如果您手动单击复选框,它将切换其状态,因此您可以使用getCheckboxStatus函数获取其值。
否则,如果您想手动设置复选框值,请使用舒适函数setCheckboxStatus,将ID(“不带#”)传递给函数和状态(truefalse)。
如果你想切换一个复选框的状态(如果为false,则将其设置为true,如果为true,则将其设置为false),使用舒适功能toggleCheckbox(传递ID,始终不带“#”)。
在你的情况下,所以,你将不得不改变你的代码(粘贴函数后)。

function getProjects(course){

console.log("getProjects");
var data = {
  "fn" : "pLoad",
  "course" : course,
  "ajax" : "true"
};
$.ajax({
  type: "GET",
  url: SERVICE_URL, //Relative or absolute path to response.php file
  data: data,
  contentType: "application/json",
  success: function(response) {
    console.log("Recieved Projects!");
    console.log(response);
    var i, list = "";
        for (i = 0; i < response.length; i++) {
            setCheckboxStatus(response[i].name[0], true);
        }
  }
});

}


为了测试的目的,我做了这个:
http://jsfiddle.net/2gh1qfoo/5/
你可以随意测试你需要的东西
另一种可能的解决方案是只是触发复选框上的“点击”事件,但在IE9上可能会有一些奇怪的结果,所以这似乎是最清晰和跨浏览器的解决方案。

相关问题