选中复选框是否选中,则添加值,如果未选中则删除值
check if checkbox is checked add value else if unchecked remove value
我有复选框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" 等是否适合复选框?当有单双引号时,我通常会为锚点做。
现场演示
您应该在每个复选框中使用值。 例如:
.HTML:
<input type="checkbox" value="1" checked />
<input type="checkbox" value="2" checked />
<input type="checkbox" value="3" />
JQuery:
var searchIDs = $("input:checkbox:checked").map(function(){
return this.value;
}).toArray();
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
演示
参考数组和选中选择器
您可以使用
.map()
方法,请注意,我已经value
属性添加到元素而不是data
因为输入应该有一个值,否则使用它有什么意义?如果要使用data-*
属性,则应指定标识符。像<input type="checkbox" data-id="1">
这样的东西,那么你可以使用jQuery data()
方法获取值:$(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()
方法。
试试这个动态的
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);
}
});
演示小提琴
JavaScript
getElementById("chkbox1").checked=true;
jquery
$("#chkbox1").prop("checked");
或
$("#chkbox1").attr("checked");
检查这个Jsfiddle
$("#btn").click(function(event){
var selectedvalue=[];
$(":checkbox:checked").each(function(){
selectedvalue.push($(this).attr("data"));
});
alert(selectedvalue.join("-"));// your desired result
})
相关文章:
- RegEx删除空属性?例如,如果(class=“”||class=“”)移除;否则就下课
- 如何检查元素的内容是否为空,如果为空,请在jquery中删除该元素
- 如果30秒未单击,请应用CSS一次,将其删除,然后重新迭代
- JavaScript-如果以前不存在文本,如何从文本区域删除新行
- 如果另一个属性相同,请删除该属性
- Wordpress TinyMCE在从文本切换到视觉时,如果锚标记包裹块元素,则会删除锚标记
- 如果用户选择离开网页,如何删除记录
- 如果screen.height低于460px,请删除一个类
- 如果今天是会计年度的最后一天,请从下拉菜单中删除当前年份
- 我想限制用户在jquery中输入文本后面的空格,如果它在文本后面,我会删除空格
- 使用jquery如何自动删除下拉列表中的第一个空白选项(如果它依赖于另一个选项)
- 仅JavaScript-删除某些类(如果存在)
- javascript页面加载检查是否存在具有特定类的span(在<tr>下),如果不存在,则删除整个<
- 从数组中删除值,用新的数组总数更新html或'$'如果没有总计
- 如果存在Javascript,请删除多个类中的一个
- 如果el包含此文本,请从中删除此字符串
- 在更改时,如果没有使用jquery更改,也可以删除对select元素的关注
- 如果他们不这样做,就从我的数组中删除东西't没有前缀
- JavaScript 属性删除如果为假,则不删除,如果为真循环
- 如何在单击时向数组添加值(Javascript)并将其删除(如果它已经在)