Solved

Select only one checkbox in a group

Posted on 2016-09-04
13
49 Views
Last Modified: 2016-09-04
I have a series of checkboxes to use instead of radios (radios are not available to the system).

I cobbled together this jquery to enable a psudeo effect, however its a little dodgy, and I'm no jquery expert.

This uses an initial checkbox to query against and what I did was hide it using css. There has to be a more eloquent way of doing this, without the need of the first checkbox.

here is the code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.compbox :checkbox').not(".hidebox").click(function () {
   var exclude = "";
 $('.compbox :checkbox').not($(this).add(exclude)).removeAttr('checked');
});
});
</script>
<style>
.hidebox {display:none;}
.compbox {display:inline-block;}
</style>


<div class="compbox">
    <input type="checkbox" class="hidebox" />
    <input type="checkbox" class="compbox" /> AAA 
    <input type="checkbox" class="compbox" /> BBB
    <input type="checkbox" class="compbox" /> CCC
    <input type="checkbox" class="compbox" /> DDD
    <input type="checkbox" class="compbox" /> EEE
    <input type="checkbox" class="compbox" /> FFF
</div>

Open in new window

Ideally I would like this to not be reliant upon the first checkbox and work without the need for an extra hidden one.

Possible?
0
Comment
Question by:Daryl Isaacs
  • 6
  • 6
13 Comments
 
LVL 30

Accepted Solution

by:
Marco Gasi earned 500 total points
Comment Utility
You can apply radio behavior to checkboxes this way:
$('.compbox :checkbox').click(function(){
        $('.compbox :checkbox').prop('checked', false);
        $(this).prop('checked', true);
});

Open in new window


In the click event, you first uncheck all checkboxes in the group, then you set property checked to true for the one clicked using $(this).

You can see it in action here: http://test.webintenerife.com/checkbox-as-radio.php

And this is the full page:
<div class="compbox">
	<input type="checkbox" class="compbox" /> AAA 
	<input type="checkbox" class="compbox" /> BBB
	<input type="checkbox" class="compbox" /> CCC
	<input type="checkbox" class="compbox" /> DDD
	<input type="checkbox" class="compbox" /> EEE
	<input type="checkbox" class="compbox" /> FFF
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
	$(document).ready(function () {
		$('.compbox :checkbox').click(function () {
			$('.compbox :checkbox').prop('checked', false);
			$(this).prop('checked', true);
		});
	});
</script>

Open in new window

0
 

Author Comment

by:Daryl Isaacs
Comment Utility
Whoa that worked well in the test page - Ill add it to the environment and lets see


thank you - keep you appraised
0
 

Author Comment

by:Daryl Isaacs
Comment Utility
Well I dumped it into the js of the system and it doesnt do what it does on a page

the checkboxes themsellves are from an array with two classes on it
one (hideme)
to hide the content of the array from showing in the admin section and

two
(compbox)
to control the look and feel of the checkboxes in the admin area

here is the array
array(
                'type' => 'checkbox',
                "holder" => "div",
                "class" => "compbox",              
                "class" => "hideme",
                "heading" => __("<div class='division_a'></div>
                  <span class='title_a'>Complimentary Sides</span>
                    <span style='color:#666;'>Side dishes to compliment this selection. Leave choices unchecked for no sides.</span>
                    <hr class='gspc'><br />", 'rbm_menu_item'),
                'param_name' => 'comes_with',
                'value' => array(
                        __( ' Coffee', 'rbm_menu_item' ) => ' Coffee',
                        __( ' Eggs', 'rbm_menu_item' ) => ' Eggs',
                        __( ' Toast', 'rbm_menu_item' ) => ' Toast',
                        __( ' English Muffin', 'rbm_menu_item' ) => ' English Muffin',

                    ),

Open in new window

Thats about as clear as mud, right? :)
0
 
LVL 30

Expert Comment

by:Marco Gasi
Comment Utility
If your html is as the one posted above it shoulkd just work (checkbox with class 'hideme' doesn't matter: see my updated example). If it does not this means we have some confilct somewhere: can you share a live link to the page? Or/and the original full code? for the page? Since we use jQuery, we act on the client side so It is not important how the page is built on server side: what's matter is the final output, that is the markup and some other javascript eventually oaded which could conflict with my jquery.
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
radios are not available to the system
What does this mean?

Might be helpful for background information on how checkboxes and radios work...
https://www.experts-exchange.com/articles/5450/Common-Sense-Examples-Using-Checkboxes-with-HTML-JavaScript-and-PHP.html
0
 

Author Comment

by:Daryl Isaacs
Comment Utility
The reason radios dont work is that this is for a Visual Composer plugin and the VC library apparently does not support them unless a lot of extra code is thrown at it. (which I dont know how to do)

The file is attached the only call to js is from this:
wp_enqueue_script( 'rbm_menu_js', plugins_url('assets/js/rbm_menu.js', __FILE__), array('jquery') );

Open in new window

and all that file contains is this
//alert("rbm_menu.js is loaded in admin");

Open in new window

I put that alert there to make sure it was active...

here is the file in question - please ignore all my comments inside
robab_menu.php
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 30

Expert Comment

by:Marco Gasi
Comment Utility
So you are developing a Wordpress plugin. And where is the code which should make checkboxes behave as radiobuttons?
0
 

Author Comment

by:Daryl Isaacs
Comment Utility
I added what you sent to the rbm_menu.js file, located in the assets/js dir.

Pasted it in as is, then ran the plugin with the alert activated - the alert worked, the rest no.
0
 
LVL 30

Expert Comment

by:Marco Gasi
Comment Utility
I see. Unfortunately, I don't know anything bout wp plugins development and I can't guess why a perfectly working code should stop to work once inserted in a wp plugin.
I'll request attention to a moderator in order to add wordpress topic: some wp expert will can help you to go forward.
0
 
LVL 30

Expert Comment

by:Marco Gasi
Comment Utility
Hi. How did you manage to solve the issue?
0
 

Author Comment

by:Daryl Isaacs
Comment Utility
I didnt, I put it on the backburner to get some other css things done - I'll have to return to it later and readdress the issue.

Meanwhile I have another issue with separating the arrays into a separate file so editing is easier. trying to figure a way to have it so its in a dir of its own. If you look at the file I sent you'll see just how big its getting and I want to break it into smaller chunks (just dont know how) :)
0
 
LVL 30

Expert Comment

by:Marco Gasi
Comment Utility
It doesn't look so big: 722 lines of code (blank lines and comments included!). But what you're trying to do refers to the internal logic of the plugin: I suggest you to post a new question adding Wordpress  to the Topic list.
0
 

Author Comment

by:Daryl Isaacs
Comment Utility
It appears long to me (specially when I have to scroll up and down to find a pertinent part - thank goodness for sublime text)

I just don't want to be annoying to people, posting a lot of questions and getting them all mad - so I try to keep most of what I'm doing in small bites and try my best to keep it centered to what I originally asked.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now