Scribd
Upload
47 views

Controlling Checkboxes in HTML

1) The user is trying to add a "No Preference" checkbox option that unchecks all other checkboxes when selected, and unchecks itself if another checkbox is selected. 2) They have provided sample code but are looking for help implementing this behavior. 3) Respondents provide solutions using jQuery and JavaScript to select and uncheck the appropriate checkboxes based on the "No Preference" checkbox's checked state.

Uploaded by

Assalam Azeem
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
47 views

Controlling Checkboxes in HTML

1) The user is trying to add a "No Preference" checkbox option that unchecks all other checkboxes when selected, and unchecks itself if another checkbox is selected. 2) They have provided sample code but are looking for help implementing this behavior. 3) Respondents provide solutions using jQuery and JavaScript to select and uncheck the appropriate checkboxes based on the "No Preference" checkbox's checked state.

Uploaded by

Assalam Azeem
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Stack Overflow sign up log in

Questions Jobs Tags Users Badges Ask

2 Controlling Checkboxes in HTML


javascript html checkbox

I am attempting to add a No Preference choice to my check box list and what I


would like to happen is as follows:

1. All checkboxes that are selected become unchecked when "No


Preference" is selected.
2. If "No Preference" is selected and another checkbox is selected, then "No
Prefernece" becomes unselected.

Here is what I have so far: http://jsfiddle.net/VuS5R/1/

Thank you for your help.

share improve this question

Silas asked
354 ●● 1 ●● 6 ●● 17 Feb 22 '12 at 23:01

I think that you can't use number as id, and id must be uniqe. – jcubic Feb 22 '12 at
23:06

1 Just found this. It seems like what you're looking for, with buttons instead of
checkboxes. Make the No preference one name and the others another. The
unchecking of the others would just require their name, and unchecking
No preference would require its name. – chris Feb 22 '12 at 23:07

add a comment

3 Answers order by votes

By using our site, you acknowledge that you have read and understand our Cookie
Policy, Privacy Policy, and our Terms of Service.
The elegant solution from jQuery. The "No preference" has "Nop"
1 class, others "pref":

$(document).ready(ffuunnccttiioonn ()
{
$(".Nop").click(ffuunnccttiioonn()
{
iiff ($(tthhiiss).iiss(":checked"))
{
$(".pref").attr("checked", ffaallssee);
}
});
$(".pref").click(ffuunnccttiioonn()
{
iiff ($(tthhiiss).iiss(":checked"))
{
$(".Nop").attr("checked", ffaallssee);
}
});
});

share improve this answer

Kath answered
1,689 ●● 12 ●● 15 Feb 23 '12 at 0:40

Thank You! JQuery always works for me. –  Silas Feb 23 '12 at 1:00

add a comment

My suggestion would be to put an ID on the ul element. Then you


2 can use getElementByID and getElementsByTagName to identify the
checkboxes. Since the "No preferences" checkbox is the first, bind an
event on its click to uncheck all the checkboxes if it is checked.

vvaarr checkboxes = document.getElementById('list').getElementsByTagN


checkboxes[0].onclick = ffuunnccttiioonn(){
iiff(checkboxes[0].cchheecckkeedd){
ffoorr(vvaarr i = 1; i < checkboxes.length; i++){
checkboxes[i].cchheecckkeedd = ffaallssee;
}
}
}

Here is the jsfiddle.

share improve this answer

Rémi Breton answered


3,551 ●● 1 ●● 18 ●● 33 Feb 22 '12 at 23:14

By using our site, you acknowledge that you have read and understand our Cookie
Policy, Privacy Policy, and our Terms of Service.
1. First, you have to give each checkbox a unique ID (currently they
1 all have an ID=1).
2. Then, you would change your "No Preference" checkbox
declaration to this:

input type="checkbox" id="0" name="BT" title="No Preference"


value="0" checked="checked" onclick="return
NoPreference_ClientClick()"
3. You will add the following JavaScript to your page:

function NoPreference_ClientClick() { if ($get("0").checked) {


$get("1").checked = $get("2").checked = $get("3").checked =
$get("4").checked = $get("5").checked = false; } else {
$get("1").checked = $get("2").checked = $get("3").checked =
$get("4").checked = $get("5").checked = true; } return false; }

...I hope you get the pattern!

share improve this answer

lkaradashkov answered
4,871 ●● 1 ●● 11 ●● 12 Feb 22 '12 at 23:11

I kind of get it, still trying to figure it out this way. –  Silas Feb 22 '12 at 23:50

add a comment

Your Answer

By using our site, you acknowledge that you have read and understand our Cookie
Policy, Privacy Policy, and our Terms of Service.
Body

Add picture

Log in

OR

Name

Email

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Post Your Answer

meta chat tour help blog privacy policy legal contact us full site
2019 Stack Exchange, Inc

By using our site, you acknowledge that you have read and understand our Cookie
Policy, Privacy Policy, and our Terms of Service.

You might also like