check if checkbox is checked add value else if unchecked remove value

Question

I have checkbox 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>

I need to have seperate value for each checkbox, so I can get those values from all and store in variable. For example

<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>

So if all the 3 are selected I will need my variable as

room_features = '1-2-3';

If any one is then unchecked, variable will be updated as

room_features = '2-3';

So on every change on checkbox, variable should be updated. I am confused if either adding data="1" etc is fine for checkboxes? I normally do for anchors when there is single double quotes.

Why don't you use value="1" ? And where is your javascript ? — Brewal
– Brewal, Commented Oct 10, 2013 at 8:32

NaYaN · Accepted Answer · 2013-10-10 08:38:51Z

2

Live Demo

You should use value in each checkbox. for ex:

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();

answered Oct 10, 2013 at 8:38

NaYaN

1,3207 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rituraj ratan · Accepted Answer · 2013-10-10 08:37:27Z

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

demo

reference Arrays and checked-selector

answered Oct 10, 2013 at 8:37

Rituraj ratan

10.4k8 gold badges38 silver badges55 bronze badges

Comments

Ram · Accepted Answer · 2013-10-10 08:43:04Z

1

You can use .map() method, note that I have added value attribute to the element instead of data as an input should have a value otherwise what's the point of using it? If you want to use data-* attributes, you should specify an identifier. Something like <input type="checkbox" data-id="1">, then you can get the value using jQuery data() method: $(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() returns an array, if you need an array you can remove the .join() method which returns a string.

edited Oct 10, 2013 at 8:43

answered Oct 10, 2013 at 8:37

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

Vinay Pratap Singh Bhadauria · Accepted Answer · 2013-10-10 08:55:07Z

1

try this dynamic one

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);
}
});

Demo Fiddle

answered Oct 10, 2013 at 8:55

Vinay Pratap Singh Bhadauria

9,9873 gold badges30 silver badges50 bronze badges

Comments

Arasan · Accepted Answer · 2016-04-28 07:23:14Z

1

javascript

getElementById("chkbox1").checked=true;

jquery

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

or

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

edited Apr 28, 2016 at 7:23

answered Oct 10, 2013 at 8:39

Arasan

13710 bronze badges

Comments

Shakti Patel · Accepted Answer · 2013-10-10 08:46:19Z

0

check this Jsfiddle

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

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

});

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

  })

answered Oct 10, 2013 at 8:46

Shakti Patel

3,8624 gold badges24 silver badges30 bronze badges

2 Comments

Ram Over a year ago

What is the difference between this and @Riturajratan's answer? You just add a click handler, even variables are the same.

Shakti Patel Over a year ago

with this button you can check any time

Collectives™ on Stack Overflow

check if checkbox is checked add value else if unchecked remove value

6 Answers 6

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related