Question

我有一个多选国家/地区复选框列表，如下所示： enter image description here

我有一个包含多个值的数组。现在选择框中存在数组中的任何值，我需要动态检查相同的值。我正在使用：

$.each( myarray, function( key, value ) {
   $('#Country option[value="'+value+'"]').attr('checked',true);
});
$('#Country').checkboxradio('refresh');

但我无法选中复选框。

FIDDLE

Answer 1

jQuery mobile的工作方式是它实际上使用你的select / option元素来创建它自己的列表，而那个列表就是我们在你的屏幕截图中看到的那个。该列表不使用实际的复选框，它使用类.ui-checkbox-on和.ui-checkbox-off来模拟项目的选择。

因此，我之前编写的代码片段根据第一个数组中提供的值获取所需选项的文本（国家/地区名称），然后使用它将必要的类添加到包含文本的链接中。这些国家。

var myarray = ["4","248"];

$(myarray).each(function(key, value){ //for each element in array
    var textarray = [$('option[value="4"]').text(), $('option[value="248"]').text()];  //get the text of each option based on it's value (you have to make this dynamic, I hard coded this) and put it in an array

    $('#Country-listbox ul li').find('a:contains("' + textarray[key] +'")').addClass('ui-checkbox-on').removeClass('ui-checkbox-off'); //get the link that contains the text we want (which is in the array we made before) and add the class that checks the box and remove the class that takes the check off

});

Country-listbox是包含jQuery根据您的选项/选择创建的列表的div的名称。它根据select元素的id为div命名。

Answer 2

我知道我的回复很晚，但可能对你有帮助。

你的数组可能喜欢这样{＆＃34; foo1＆＃34;：＆＃34; india＆＃34;，＆＃34; foo2＆＃34;：＆＃34;阿富汗＆＃34;，＆＃34; foo3＆＃34;：＆＃34;阿尔巴尼亚＆＃34;};

$(document).ready(function(){
    var myid,myvalue;
    var object={"foo1":"india","foo2":"Afghanistan","foo3":"Albania"};
    jQuery("input[name='country']").each(function() {
    myid=this.id;
    myvalue=this.value;
    $.each(object,function(key,value)
            {
                if(value==myvalue)
                    {
                    $("#"+myid).attr("checked",true);
                    }
            });

     });

});

在html中

<body>
<form>
<input type="checkbox" id="foo1" name="country" value="india">india
<input type="checkbox" id="foo2" name="country" value="Afghanistan">Afghanistan
<input type="checkbox" id="foo3" name="country" value="Albania">Albania
<input type="checkbox" id="foo4" name="country" value="Algeria">Algeria
</form>
</body>
</html>

jquery mobile动态检查多个复选框

2 个答案: