We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Solved
Select only one checkbox in a group
Posted on 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
Possible?
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>
Possible?
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
6-
6
13 Comments
Active 1 day ago
You can apply radio behavior to checkboxes this way:
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:
$('.compbox :checkbox').click(function(){
$('.compbox :checkbox').prop('checked', false);
$(this).prop('checked', true);
});
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>
Whoa that worked well in the test page - Ill add it to the environment and lets see
thank you - keep you appraised
thank you - keep you appraised
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
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',
),
Active 1 day ago
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.
radios are not available to the systemWhat 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
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:
here is the file in question - please ignore all my comments inside
robab_menu.php
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') );
//alert("rbm_menu.js is loaded in admin");
here is the file in question - please ignore all my comments inside
robab_menu.php
Active 1 day ago
So you are developing a Wordpress plugin. And where is the code which should make checkboxes behave as radiobuttons?
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.
Pasted it in as is, then ran the plugin with the alert activated - the alert worked, the rest no.
Active 1 day ago
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.
I'll request attention to a moderator in order to add wordpress topic: some wp expert will can help you to go forward.
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) :)
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) :)
Active 1 day ago
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.
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.
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.
Featured Post
Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.
One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it
here
.
In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors.
Create your external css file by saving it as style.css then set up your style tags:
(CODE)
Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS. New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month13 days, 21 hours left to enroll
656 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.