1

我有复选框 html。

<label><input type="checkbox"><span>Air Conditioning</span></label>
<label><input type="checkbox"><span>Cable TV Service</span></label>
<label><input type="checkbox"><span>Private Bathroom</span></label>

我需要为每个复选框设置单独的值，因此我可以从所有复选框中获取这些值并存储在变量中。例如

<label><input type="checkbox" data="1"><span>Air Conditioning</span></label>
<label><input type="checkbox" data="2"><span>Cable TV Service</span></label>
<label><input type="checkbox" data="3"><span>Private Bathroom</span></label>

因此，如果选择了所有 3 个，我将需要我的变量作为

room_features = '1-2-3';

如果任何一个未选中，变量将更新为

room_features = '2-3';

因此，在复选框的每次更改时，都应更新变量。如果添加 data="1" 等是否适合复选框，我会感到困惑？当有单双引号时，我通常会为锚点做。

4

6 回答 6

2

现场演示

您应该在每个复选框中使用值。例如：

HTML：

<input type="checkbox" value="1" checked />
<input type="checkbox" value="2" checked />
<input type="checkbox" value="3" />

查询：

var searchIDs = $("input:checkbox:checked").map(function(){
        return this.value;
    }).toArray();
于 2013-10-10T08:38:51.090 回答
1

html

<label><input type="checkbox" checked="checked" data="1"><span>Air Conditioning</span></label>
<label><input type="checkbox" checked="checked" data="2"><span>Cable TV Service</span></label>
<label><input type="checkbox" data="3"><span>Private Bathroom</span></label>

JS

 var selectedvalue=[];
    $(":checkbox:checked").each(function(){

    selectedvalue.push($(this).attr("data"));

    });

alert(selectedvalue.join("-"));// your desired result

演示

参考数组和检查选择器

于 2013-10-10T08:37:27.347 回答
1

您可以使用.map()方法，注意我已经向value元素添加了属性，而不是data作为输入应该有一个值，否则使用它有什么意义？如果你想使用data-*属性，你应该指定一个标识符。之类 <input type="checkbox" data-id="1">的，那么您可以使用 jQuerydata()方法获取值：$(elem).data('id');.

<label><input type="checkbox" value="1"><span>Air Conditioning</span></label>
...


var vals = $('input[type=checkbox]:checked').map(function(){
     return this.value; // return $(this).data('whatever');
}).get().join('-');

get()返回一个数组，如果你需要一个数组，你可以删除.join()返回字符串的方法。

于 2013-10-10T08:37:41.547 回答
1

javascript

getElementById("chkbox1").checked=true;

jQuery

$("#chkbox1").prop("checked");

或者

$("#chkbox1").attr("checked");
于 2013-10-10T08:39:25.873 回答
1

试试这个动态的

var room_features = "";

$('[type=checkbox]').change(function () {
var data = "-" + $(this).attr('data');
if (room_features.indexOf(data) != -1) {
    room_features = room_features.replace(data, "");
    alert(room_features);
} else {
    room_features = room_features + data;
    alert(room_features);
}
});

演示小提琴

于 2013-10-10T08:55:07.953 回答
0

检查这个Jsfiddle

$("#btn").click(function(event){
    var selectedvalue=[];
$(":checkbox:checked").each(function(){

selectedvalue.push($(this).attr("data"));

});

alert(selectedvalue.join("-"));// your desired result

  })
于 2013-10-10T08:46:19.960 回答