Uncheck all checkboxes if “Other” checkbox is checked and get value The 2019 Stack Overflow Developer Survey Results Are In Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) The Ask Question Wizard is Live! Data science time! April 2019 and salary with experienceSetting “checked” for a checkbox with jQuery?How can I get query string values in JavaScript?How to check whether a checkbox is checked in jQuery?Get selected value in dropdown list using JavaScript?Check if checkbox is checked with jQueryGet checkbox value in jQueryTesting if a checkbox is checked with jQueryCheck/Uncheck checkbox with JavaScript?Check if a value is an object in JavaScriptcheck / uncheck checkbox using jquery?
how can a perfect fourth interval be considered either consonant or dissonant?
Is it ok to offer lower paid work as a trial period before negotiating for a full-time job?
Is this wall load bearing? Blueprints and photos attached
Sort list of array linked objects by keys and values
Can the Right Ascension and Argument of Perigee of a spacecraft's orbit keep varying by themselves with time?
What would this chord progression be called?
Word for: a synonym with a positive connotation?
How to type a long/em dash `—`
My body leaves; my core can stay
Single author papers against my advisor's will?
How do I design a circuit to convert a 100 mV and 50 Hz sine wave to a square wave?
Example of compact Riemannian manifold with only one geodesic.
Can the DM override racial traits?
How to determine omitted units in a publication
If I score a critical hit on an 18 or higher, what are my chances of getting a critical hit if I roll 3d20?
Are there continuous functions who are the same in an interval but differ in at least one other point?
"... to apply for a visa" or "... and applied for a visa"?
Is every episode of "Where are my Pants?" identical?
For what reasons would an animal species NOT cross a *horizontal* land bridge?
should truth entail possible truth
What was the last x86 CPU that did not have the x87 floating-point unit built in?
Is there a way to generate uniformly distributed points on a sphere from a fixed amount of random real numbers per point?
Can we generate random numbers using irrational numbers like π and e?
Why doesn't a hydraulic lever violate conservation of energy?
Uncheck all checkboxes if “Other” checkbox is checked and get value
The 2019 Stack Overflow Developer Survey Results Are In
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)
The Ask Question Wizard is Live!
Data science time! April 2019 and salary with experienceSetting “checked” for a checkbox with jQuery?How can I get query string values in JavaScript?How to check whether a checkbox is checked in jQuery?Get selected value in dropdown list using JavaScript?Check if checkbox is checked with jQueryGet checkbox value in jQueryTesting if a checkbox is checked with jQueryCheck/Uncheck checkbox with JavaScript?Check if a value is an object in JavaScriptcheck / uncheck checkbox using jquery?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
1
So, I have 4 checkboxes:
- Heating
- AC
- Cold Chain
- Others
The condition is, you can multiple check the three: Heating, AC, and Cold Chain. But when you check on "Other", the three will be unchecked. And when you check again on any of the three, the Other checkbox will be unchecked.
When the Others is checked, a "Please specify" input text will appear.
And in the summary, Looking for solutions in Others - [value]
This is my fiddle
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' + $('#solutions').val() + (' n') + 'Are you using an existing customer? ' + $('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>javascript jquery checkbox
edited Mar 8 at 13:25
mthrsj
1,6401724
asked Mar 8 at 12:33
porscheporsche
255
add a comment |
1
So, I have 4 checkboxes:
- Heating
- AC
- Cold Chain
- Others
The condition is, you can multiple check the three: Heating, AC, and Cold Chain. But when you check on "Other", the three will be unchecked. And when you check again on any of the three, the Other checkbox will be unchecked.
When the Others is checked, a "Please specify" input text will appear.
And in the summary, Looking for solutions in Others - [value]
This is my fiddle
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' + $('#solutions').val() + (' n') + 'Are you using an existing customer? ' + $('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>javascript jquery checkbox
edited Mar 8 at 13:25
mthrsj
1,6401724
asked Mar 8 at 12:33
porscheporsche
255
1
What have you tried to uncheck the others?
– mthrsj
Mar 8 at 12:55
add a comment |
1
1
1
0
So, I have 4 checkboxes:
- Heating
- AC
- Cold Chain
- Others
The condition is, you can multiple check the three: Heating, AC, and Cold Chain. But when you check on "Other", the three will be unchecked. And when you check again on any of the three, the Other checkbox will be unchecked.
When the Others is checked, a "Please specify" input text will appear.
And in the summary, Looking for solutions in Others - [value]
This is my fiddle
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' + $('#solutions').val() + (' n') + 'Are you using an existing customer? ' + $('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>javascript jquery checkbox
edited Mar 8 at 13:25
mthrsj
1,6401724
asked Mar 8 at 12:33
porscheporsche
255
So, I have 4 checkboxes:
- Heating
- AC
- Cold Chain
- Others
The condition is, you can multiple check the three: Heating, AC, and Cold Chain. But when you check on "Other", the three will be unchecked. And when you check again on any of the three, the Other checkbox will be unchecked.
When the Others is checked, a "Please specify" input text will appear.
And in the summary, Looking for solutions in Others - [value]
This is my fiddle
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' + $('#solutions').val() + (' n') + 'Are you using an existing customer? ' + $('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' + $('#solutions').val() + (' n') + 'Are you using an existing customer? ' + $('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' + $('#solutions').val() + (' n') + 'Are you using an existing customer? ' + $('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>javascript jquery checkbox
javascript jquery checkbox
edited Mar 8 at 13:25
mthrsj
1,6401724
asked Mar 8 at 12:33
porscheporsche
255
edited Mar 8 at 13:25
mthrsj
1,6401724
asked Mar 8 at 12:33
porscheporsche
255
edited Mar 8 at 13:25
mthrsj
1,6401724
edited Mar 8 at 13:25
mthrsj
1,6401724
edited Mar 8 at 13:25
mthrsj
1,6401724
1,6401724
asked Mar 8 at 12:33
porscheporsche
255
asked Mar 8 at 12:33
porscheporsche
255
asked Mar 8 at 12:33
porscheporsche
255
255
1
What have you tried to uncheck the others?
– mthrsj
Mar 8 at 12:55
add a comment |
1
What have you tried to uncheck the others?
– mthrsj
Mar 8 at 12:55
1
1
What have you tried to uncheck the others?
– mthrsj
Mar 8 at 12:55
What have you tried to uncheck the others?
– mthrsj
Mar 8 at 12:55
add a comment |
4 Answers
4
active
oldest
votes
2
Made a simple example for you how you can do this using the prop() and siblings() functions.
Added some classes for better selectors.
$('#wrapper .some-checkbox').on('change', function()
var $this = $(this);
if ($this.prop('checked'))
if ($this.is('.some-others'))
$this.siblings().prop('checked', false);
else
$this.siblings('.some-others').prop('checked', false);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<input class="some-checkbox" type="checkbox" value="Heating">Heating<br>
<input class="some-checkbox" type="checkbox" value="Ac">AC<br>
<input class="some-checkbox" type="checkbox" value="Cold Chain">Cold Chain<br>
<input class="some-checkbox some-others" type="checkbox" value="Others">Others<br>
</div>answered Mar 8 at 13:01
Mark BaijensMark Baijens
7,166103554
1
Mark Baijens, thank you so much!!! Mwuahhhhh
– porsche
Mar 8 at 13:10
1
I would have accepted this answer, way simpler than the accepted one! I know the accepted one is trying to make the least amount of changes, but it's just a pain to read.
– Juan Mendes
Mar 8 at 13:15
@JuanMendes Thanks for kind words, everyone has his own preferences though. Maybe the OP isn't able to change html.
– Mark Baijens
Mar 8 at 13:20
I've never got a kiss for an answer before :p Of course, just my 2 cent
– Juan Mendes
Mar 8 at 14:05
add a comment |
0
You need to check if the checkbox Others is checked, then uncheck the other checkboxes with $('<your-checkbox->').prop('checked', false);
For example:
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
if ($(this).attr("value") === "Others")
CountSelectedCB = []; // reset result
$("input:checkbox").each(function()
if ($(this).attr("value") !== "Others")
$(this).prop('checked', false); // uncheck
);
$('input[name=solutions]').hide(); // toggle input
$('input[name=specify]').show(); // toggle input
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' +
$('#solutions').val() +
(' n') +
'Are you using an existing customer? ' +
$('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" placeholder="Please specify" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br>
Summary:<br>
<textarea type='text' id="summary"></textarea>answered Mar 8 at 12:56
JukyJuky
1879
add a comment |
0
Well, I modified your displayCheckbox() function. Please try like this. I think your problem will be solved.
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
if($('input:checkbox[value="Others"]').is(":checked"))
$('input:checkbox').not(this).prop('checked', false);
CountSelectedCB.length = 0;
CountSelectedCB.push($(this).attr("value"));
else
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
Thank you.
answered Mar 8 at 13:24
Kalyan Halder RaazKalyan Halder Raaz
318414
add a comment |
0
I've updated your Fiddle code. Please see this, it will solve your problem.
Here is the snippet:
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
selectedValue = $(this).attr("value");
CountSelectedCB.length = 0;
if (selectedValue === "Others" && $(this).is(":checked"))
uncheckAllCheckBox();
$(this).prop('checked', true);
CountSelectedCB.push(selectedValue);
else
$("input:checkbox").each(function()
if ($(this).attr("value") === "Others")
$(this).prop('checked', false);
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
function uncheckAllCheckBox()
$("input:checkbox").each(function()
$(this).prop('checked', false);
CountSelectedCB.length = 0;
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' + $('#solutions').val() + (' n') + 'Are you using an existing customer? ' + $('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>Updated JSFiddle Code
edited Mar 9 at 10:53
FZs
2,29931429
answered Mar 8 at 13:15
Md. Abul HasanMd. Abul Hasan
275
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55063342%2funcheck-all-checkboxes-if-other-checkbox-is-checked-and-get-value%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Made a simple example for you how you can do this using the prop() and siblings() functions.
Added some classes for better selectors.
$('#wrapper .some-checkbox').on('change', function()
var $this = $(this);
if ($this.prop('checked'))
if ($this.is('.some-others'))
$this.siblings().prop('checked', false);
else
$this.siblings('.some-others').prop('checked', false);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<input class="some-checkbox" type="checkbox" value="Heating">Heating<br>
<input class="some-checkbox" type="checkbox" value="Ac">AC<br>
<input class="some-checkbox" type="checkbox" value="Cold Chain">Cold Chain<br>
<input class="some-checkbox some-others" type="checkbox" value="Others">Others<br>
</div>answered Mar 8 at 13:01
Mark BaijensMark Baijens
7,166103554
1
Mark Baijens, thank you so much!!! Mwuahhhhh
– porsche
Mar 8 at 13:10
1
I would have accepted this answer, way simpler than the accepted one! I know the accepted one is trying to make the least amount of changes, but it's just a pain to read.
– Juan Mendes
Mar 8 at 13:15
@JuanMendes Thanks for kind words, everyone has his own preferences though. Maybe the OP isn't able to change html.
– Mark Baijens
Mar 8 at 13:20
I've never got a kiss for an answer before :p Of course, just my 2 cent
– Juan Mendes
Mar 8 at 14:05
add a comment |
2
Made a simple example for you how you can do this using the prop() and siblings() functions.
Added some classes for better selectors.
$('#wrapper .some-checkbox').on('change', function()
var $this = $(this);
if ($this.prop('checked'))
if ($this.is('.some-others'))
$this.siblings().prop('checked', false);
else
$this.siblings('.some-others').prop('checked', false);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<input class="some-checkbox" type="checkbox" value="Heating">Heating<br>
<input class="some-checkbox" type="checkbox" value="Ac">AC<br>
<input class="some-checkbox" type="checkbox" value="Cold Chain">Cold Chain<br>
<input class="some-checkbox some-others" type="checkbox" value="Others">Others<br>
</div>answered Mar 8 at 13:01
Mark BaijensMark Baijens
7,166103554
1
Mark Baijens, thank you so much!!! Mwuahhhhh
– porsche
Mar 8 at 13:10
1
I would have accepted this answer, way simpler than the accepted one! I know the accepted one is trying to make the least amount of changes, but it's just a pain to read.
– Juan Mendes
Mar 8 at 13:15
@JuanMendes Thanks for kind words, everyone has his own preferences though. Maybe the OP isn't able to change html.
– Mark Baijens
Mar 8 at 13:20
I've never got a kiss for an answer before :p Of course, just my 2 cent
– Juan Mendes
Mar 8 at 14:05
add a comment |
2
2
2
Made a simple example for you how you can do this using the prop() and siblings() functions.
Added some classes for better selectors.
$('#wrapper .some-checkbox').on('change', function()
var $this = $(this);
if ($this.prop('checked'))
if ($this.is('.some-others'))
$this.siblings().prop('checked', false);
else
$this.siblings('.some-others').prop('checked', false);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<input class="some-checkbox" type="checkbox" value="Heating">Heating<br>
<input class="some-checkbox" type="checkbox" value="Ac">AC<br>
<input class="some-checkbox" type="checkbox" value="Cold Chain">Cold Chain<br>
<input class="some-checkbox some-others" type="checkbox" value="Others">Others<br>
</div>answered Mar 8 at 13:01
Mark BaijensMark Baijens
7,166103554
Made a simple example for you how you can do this using the prop() and siblings() functions.
Added some classes for better selectors.
$('#wrapper .some-checkbox').on('change', function()
var $this = $(this);
if ($this.prop('checked'))
if ($this.is('.some-others'))
$this.siblings().prop('checked', false);
else
$this.siblings('.some-others').prop('checked', false);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<input class="some-checkbox" type="checkbox" value="Heating">Heating<br>
<input class="some-checkbox" type="checkbox" value="Ac">AC<br>
<input class="some-checkbox" type="checkbox" value="Cold Chain">Cold Chain<br>
<input class="some-checkbox some-others" type="checkbox" value="Others">Others<br>
</div>$('#wrapper .some-checkbox').on('change', function()
var $this = $(this);
if ($this.prop('checked'))
if ($this.is('.some-others'))
$this.siblings().prop('checked', false);
else
$this.siblings('.some-others').prop('checked', false);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<input class="some-checkbox" type="checkbox" value="Heating">Heating<br>
<input class="some-checkbox" type="checkbox" value="Ac">AC<br>
<input class="some-checkbox" type="checkbox" value="Cold Chain">Cold Chain<br>
<input class="some-checkbox some-others" type="checkbox" value="Others">Others<br>
</div>$('#wrapper .some-checkbox').on('change', function()
var $this = $(this);
if ($this.prop('checked'))
if ($this.is('.some-others'))
$this.siblings().prop('checked', false);
else
$this.siblings('.some-others').prop('checked', false);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<input class="some-checkbox" type="checkbox" value="Heating">Heating<br>
<input class="some-checkbox" type="checkbox" value="Ac">AC<br>
<input class="some-checkbox" type="checkbox" value="Cold Chain">Cold Chain<br>
<input class="some-checkbox some-others" type="checkbox" value="Others">Others<br>
</div>answered Mar 8 at 13:01
Mark BaijensMark Baijens
7,166103554
edited Mar 8 at 13:11
answered Mar 8 at 13:01
Mark BaijensMark Baijens
7,166103554
answered Mar 8 at 13:01
Mark BaijensMark Baijens
7,166103554
answered Mar 8 at 13:01
Mark BaijensMark Baijens
7,166103554
7,166103554
1
Mark Baijens, thank you so much!!! Mwuahhhhh
– porsche
Mar 8 at 13:10
1
I would have accepted this answer, way simpler than the accepted one! I know the accepted one is trying to make the least amount of changes, but it's just a pain to read.
– Juan Mendes
Mar 8 at 13:15
@JuanMendes Thanks for kind words, everyone has his own preferences though. Maybe the OP isn't able to change html.
– Mark Baijens
Mar 8 at 13:20
I've never got a kiss for an answer before :p Of course, just my 2 cent
– Juan Mendes
Mar 8 at 14:05
add a comment |
1
Mark Baijens, thank you so much!!! Mwuahhhhh
– porsche
Mar 8 at 13:10
1
I would have accepted this answer, way simpler than the accepted one! I know the accepted one is trying to make the least amount of changes, but it's just a pain to read.
– Juan Mendes
Mar 8 at 13:15
@JuanMendes Thanks for kind words, everyone has his own preferences though. Maybe the OP isn't able to change html.
– Mark Baijens
Mar 8 at 13:20
I've never got a kiss for an answer before :p Of course, just my 2 cent
– Juan Mendes
Mar 8 at 14:05
1
1
Mark Baijens, thank you so much!!! Mwuahhhhh
– porsche
Mar 8 at 13:10
Mark Baijens, thank you so much!!! Mwuahhhhh
– porsche
Mar 8 at 13:10
1
1
I would have accepted this answer, way simpler than the accepted one! I know the accepted one is trying to make the least amount of changes, but it's just a pain to read.
– Juan Mendes
Mar 8 at 13:15
I would have accepted this answer, way simpler than the accepted one! I know the accepted one is trying to make the least amount of changes, but it's just a pain to read.
– Juan Mendes
Mar 8 at 13:15
@JuanMendes Thanks for kind words, everyone has his own preferences though. Maybe the OP isn't able to change html.
– Mark Baijens
Mar 8 at 13:20
@JuanMendes Thanks for kind words, everyone has his own preferences though. Maybe the OP isn't able to change html.
– Mark Baijens
Mar 8 at 13:20
I've never got a kiss for an answer before :p Of course, just my 2 cent
– Juan Mendes
Mar 8 at 14:05
I've never got a kiss for an answer before :p Of course, just my 2 cent
– Juan Mendes
Mar 8 at 14:05
add a comment |
0
You need to check if the checkbox Others is checked, then uncheck the other checkboxes with $('<your-checkbox->').prop('checked', false);
For example:
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
if ($(this).attr("value") === "Others")
CountSelectedCB = []; // reset result
$("input:checkbox").each(function()
if ($(this).attr("value") !== "Others")
$(this).prop('checked', false); // uncheck
);
$('input[name=solutions]').hide(); // toggle input
$('input[name=specify]').show(); // toggle input
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' +
$('#solutions').val() +
(' n') +
'Are you using an existing customer? ' +
$('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" placeholder="Please specify" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br>
Summary:<br>
<textarea type='text' id="summary"></textarea>answered Mar 8 at 12:56
JukyJuky
1879
add a comment |
0
You need to check if the checkbox Others is checked, then uncheck the other checkboxes with $('<your-checkbox->').prop('checked', false);
For example:
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
if ($(this).attr("value") === "Others")
CountSelectedCB = []; // reset result
$("input:checkbox").each(function()
if ($(this).attr("value") !== "Others")
$(this).prop('checked', false); // uncheck
);
$('input[name=solutions]').hide(); // toggle input
$('input[name=specify]').show(); // toggle input
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' +
$('#solutions').val() +
(' n') +
'Are you using an existing customer? ' +
$('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" placeholder="Please specify" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br>
Summary:<br>
<textarea type='text' id="summary"></textarea>answered Mar 8 at 12:56
JukyJuky
1879
add a comment |
0
0
0
You need to check if the checkbox Others is checked, then uncheck the other checkboxes with $('<your-checkbox->').prop('checked', false);
For example:
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
if ($(this).attr("value") === "Others")
CountSelectedCB = []; // reset result
$("input:checkbox").each(function()
if ($(this).attr("value") !== "Others")
$(this).prop('checked', false); // uncheck
);
$('input[name=solutions]').hide(); // toggle input
$('input[name=specify]').show(); // toggle input
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' +
$('#solutions').val() +
(' n') +
'Are you using an existing customer? ' +
$('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" placeholder="Please specify" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br>
Summary:<br>
<textarea type='text' id="summary"></textarea>answered Mar 8 at 12:56
JukyJuky
1879
You need to check if the checkbox Others is checked, then uncheck the other checkboxes with $('<your-checkbox->').prop('checked', false);
For example:
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
if ($(this).attr("value") === "Others")
CountSelectedCB = []; // reset result
$("input:checkbox").each(function()
if ($(this).attr("value") !== "Others")
$(this).prop('checked', false); // uncheck
);
$('input[name=solutions]').hide(); // toggle input
$('input[name=specify]').show(); // toggle input
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' +
$('#solutions').val() +
(' n') +
'Are you using an existing customer? ' +
$('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" placeholder="Please specify" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br>
Summary:<br>
<textarea type='text' id="summary"></textarea>$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
if ($(this).attr("value") === "Others")
CountSelectedCB = []; // reset result
$("input:checkbox").each(function()
if ($(this).attr("value") !== "Others")
$(this).prop('checked', false); // uncheck
);
$('input[name=solutions]').hide(); // toggle input
$('input[name=specify]').show(); // toggle input
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' +
$('#solutions').val() +
(' n') +
'Are you using an existing customer? ' +
$('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" placeholder="Please specify" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br>
Summary:<br>
<textarea type='text' id="summary"></textarea>$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
if ($(this).attr("value") === "Others")
CountSelectedCB = []; // reset result
$("input:checkbox").each(function()
if ($(this).attr("value") !== "Others")
$(this).prop('checked', false); // uncheck
);
$('input[name=solutions]').hide(); // toggle input
$('input[name=specify]').show(); // toggle input
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' +
$('#solutions').val() +
(' n') +
'Are you using an existing customer? ' +
$('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" placeholder="Please specify" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br>
Summary:<br>
<textarea type='text' id="summary"></textarea>answered Mar 8 at 12:56
JukyJuky
1879
answered Mar 8 at 12:56
JukyJuky
1879
answered Mar 8 at 12:56
JukyJuky
1879
answered Mar 8 at 12:56
JukyJuky
1879
1879
add a comment |
add a comment |
0
Well, I modified your displayCheckbox() function. Please try like this. I think your problem will be solved.
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
if($('input:checkbox[value="Others"]').is(":checked"))
$('input:checkbox').not(this).prop('checked', false);
CountSelectedCB.length = 0;
CountSelectedCB.push($(this).attr("value"));
else
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
Thank you.
answered Mar 8 at 13:24
Kalyan Halder RaazKalyan Halder Raaz
318414
add a comment |
0
Well, I modified your displayCheckbox() function. Please try like this. I think your problem will be solved.
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
if($('input:checkbox[value="Others"]').is(":checked"))
$('input:checkbox').not(this).prop('checked', false);
CountSelectedCB.length = 0;
CountSelectedCB.push($(this).attr("value"));
else
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
Thank you.
answered Mar 8 at 13:24
Kalyan Halder RaazKalyan Halder Raaz
318414
add a comment |
0
0
0
Well, I modified your displayCheckbox() function. Please try like this. I think your problem will be solved.
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
if($('input:checkbox[value="Others"]').is(":checked"))
$('input:checkbox').not(this).prop('checked', false);
CountSelectedCB.length = 0;
CountSelectedCB.push($(this).attr("value"));
else
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
Thank you.
answered Mar 8 at 13:24
Kalyan Halder RaazKalyan Halder Raaz
318414
Well, I modified your displayCheckbox() function. Please try like this. I think your problem will be solved.
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
if($('input:checkbox[value="Others"]').is(":checked"))
$('input:checkbox').not(this).prop('checked', false);
CountSelectedCB.length = 0;
CountSelectedCB.push($(this).attr("value"));
else
$("input:checkbox").each(function()
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
Thank you.
answered Mar 8 at 13:24
Kalyan Halder RaazKalyan Halder Raaz
318414
answered Mar 8 at 13:24
Kalyan Halder RaazKalyan Halder Raaz
318414
answered Mar 8 at 13:24
Kalyan Halder RaazKalyan Halder Raaz
318414
answered Mar 8 at 13:24
Kalyan Halder RaazKalyan Halder Raaz
318414
318414
add a comment |
add a comment |
0
I've updated your Fiddle code. Please see this, it will solve your problem.
Here is the snippet:
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
selectedValue = $(this).attr("value");
CountSelectedCB.length = 0;
if (selectedValue === "Others" && $(this).is(":checked"))
uncheckAllCheckBox();
$(this).prop('checked', true);
CountSelectedCB.push(selectedValue);
else
$("input:checkbox").each(function()
if ($(this).attr("value") === "Others")
$(this).prop('checked', false);
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
function uncheckAllCheckBox()
$("input:checkbox").each(function()
$(this).prop('checked', false);
CountSelectedCB.length = 0;
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' + $('#solutions').val() + (' n') + 'Are you using an existing customer? ' + $('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>Updated JSFiddle Code
edited Mar 9 at 10:53
FZs
2,29931429
answered Mar 8 at 13:15
Md. Abul HasanMd. Abul Hasan
275
add a comment |
0
I've updated your Fiddle code. Please see this, it will solve your problem.
Here is the snippet:
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
selectedValue = $(this).attr("value");
CountSelectedCB.length = 0;
if (selectedValue === "Others" && $(this).is(":checked"))
uncheckAllCheckBox();
$(this).prop('checked', true);
CountSelectedCB.push(selectedValue);
else
$("input:checkbox").each(function()
if ($(this).attr("value") === "Others")
$(this).prop('checked', false);
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
function uncheckAllCheckBox()
$("input:checkbox").each(function()
$(this).prop('checked', false);
CountSelectedCB.length = 0;
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' + $('#solutions').val() + (' n') + 'Are you using an existing customer? ' + $('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>Updated JSFiddle Code
edited Mar 9 at 10:53
FZs
2,29931429
answered Mar 8 at 13:15
Md. Abul HasanMd. Abul Hasan
275
add a comment |
0
0
0
I've updated your Fiddle code. Please see this, it will solve your problem.
Here is the snippet:
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
selectedValue = $(this).attr("value");
CountSelectedCB.length = 0;
if (selectedValue === "Others" && $(this).is(":checked"))
uncheckAllCheckBox();
$(this).prop('checked', true);
CountSelectedCB.push(selectedValue);
else
$("input:checkbox").each(function()
if ($(this).attr("value") === "Others")
$(this).prop('checked', false);
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
function uncheckAllCheckBox()
$("input:checkbox").each(function()
$(this).prop('checked', false);
CountSelectedCB.length = 0;
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' + $('#solutions').val() + (' n') + 'Are you using an existing customer? ' + $('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>Updated JSFiddle Code
edited Mar 9 at 10:53
FZs
2,29931429
answered Mar 8 at 13:15
Md. Abul HasanMd. Abul Hasan
275
I've updated your Fiddle code. Please see this, it will solve your problem.
Here is the snippet:
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
selectedValue = $(this).attr("value");
CountSelectedCB.length = 0;
if (selectedValue === "Others" && $(this).is(":checked"))
uncheckAllCheckBox();
$(this).prop('checked', true);
CountSelectedCB.push(selectedValue);
else
$("input:checkbox").each(function()
if ($(this).attr("value") === "Others")
$(this).prop('checked', false);
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
function uncheckAllCheckBox()
$("input:checkbox").each(function()
$(this).prop('checked', false);
CountSelectedCB.length = 0;
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' + $('#solutions').val() + (' n') + 'Are you using an existing customer? ' + $('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>Updated JSFiddle Code
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
selectedValue = $(this).attr("value");
CountSelectedCB.length = 0;
if (selectedValue === "Others" && $(this).is(":checked"))
uncheckAllCheckBox();
$(this).prop('checked', true);
CountSelectedCB.push(selectedValue);
else
$("input:checkbox").each(function()
if ($(this).attr("value") === "Others")
$(this).prop('checked', false);
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
function uncheckAllCheckBox()
$("input:checkbox").each(function()
$(this).prop('checked', false);
CountSelectedCB.length = 0;
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' + $('#solutions').val() + (' n') + 'Are you using an existing customer? ' + $('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox()
$("input:checkbox").change(function()
selectedCB = [];
notSelectedCB = [];
selectedValue = $(this).attr("value");
CountSelectedCB.length = 0;
if (selectedValue === "Others" && $(this).is(":checked"))
uncheckAllCheckBox();
$(this).prop('checked', true);
CountSelectedCB.push(selectedValue);
else
$("input:checkbox").each(function()
if ($(this).attr("value") === "Others")
$(this).prop('checked', false);
if ($(this).is(":checked"))
CountSelectedCB.push($(this).attr("value"));
);
$('input[name=solutions]').val(CountSelectedCB).blur();
);
function uncheckAllCheckBox()
$("input:checkbox").each(function()
$(this).prop('checked', false);
CountSelectedCB.length = 0;
);
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox()
$("input:radio").change(function()
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function()
if ($(this).is(":checked"))
CountSelectedRB.push($(this).attr("value"));
);
$('input[name=existing]').val(CountSelectedRB).blur();
);
$('#solutions, #existing').bind('keyup blur', function()
$('#summary').val('You are looking for solutions in ' + $('#solutions').val() + (' n') + 'Are you using an existing customer? ' + $('#existing').val());
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>edited Mar 9 at 10:53
FZs
2,29931429
answered Mar 8 at 13:15
Md. Abul HasanMd. Abul Hasan
275
edited Mar 9 at 10:53
FZs
2,29931429
edited Mar 9 at 10:53
FZs
2,29931429
edited Mar 9 at 10:53
FZs
2,29931429
2,29931429
answered Mar 8 at 13:15
Md. Abul HasanMd. Abul Hasan
275
answered Mar 8 at 13:15
Md. Abul HasanMd. Abul Hasan
275
answered Mar 8 at 13:15
Md. Abul HasanMd. Abul Hasan
275
275
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55063342%2funcheck-all-checkboxes-if-other-checkbox-is-checked-and-get-value%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
What have you tried to uncheck the others?
– mthrsj
Mar 8 at 12:55