I need check-boxes list that has one quality of radio-buttons:
That you can check only one of them.
I don't want to use radio-buttons, becouse I need other qualities of check-boxes, like that you can un-check it by additional click.
Is there any simple way to do it?
I can use javascript, including knockout and jquery libraries.
DEMO
$(function() {
$(':checkbox').on('change',function() {
$(':checkbox[name=' + this.name + ']:checked').not(this).prop('checked',false);
});
});
HTML:
<fieldset>
<legend>Group1</legend>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
</fieldset>
<fieldset>
<legend>Group2</legend>
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
</fieldset>
Checkbox Group exactly like a radio button group
jsfiddle:
Checkbox Group
Javascript:
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).attr("checked",false);
$(this).attr("checked",true);
});
Checkbox Group you can remove all checked.
jsfiddle:
Checkbox Group(can remove all checked)
Javascript:
$("input:checkbox").change(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).not(this).prop("checked",false);
$(this).prop("checked",!this.checked);
});
Related
I have the following HTML code (that I can't access/amend) for one of my many checkboxes:
<input type="checkbox" class="cat_input" name="subcategory1a" value="1">
I want to turn the checkbox into a toggle, for which I understand I need a <label> tag associated with the 'ID' of the checkbox. Unfortunately, the HTML code as per above has only the input tag without ID and no <label> tag.
To create a checkbox toggle I understand I would need a unique ID and associated <label> tag for each checkbox such as for example:
<input type="checkbox" class="cat_input" name="subcategory1a" value="1" ID="checkbox1"> <label for="checkbox1"></label>
I have two questions:
How can I add the ID and <label> tag with jQuery to my existing <input> tag to create a code as per the example?
Given that I have c. 40-50 checkboxes of which each needs its own ID and label tag, is there a way to make the jQuery code compact as opposed to copy paste the code 40-50x?
I would much appreciate your help. Thank you very much in advance!
EDIT
<script>
$('input[type="checkbox"]').each(function(i, v) {
var checkbox = $(this);
checkbox.attr("id", ("checkbox_" + (i + 1)))
checkbox.after($("<label>").attr("for", checkbox.attr("id")));
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="geodir-filter-cat gd-type-single gd-field-fieldset"><span>Header</span>
<ul>
<li><input type="checkbox" class="cat_input" name="subcategory1a" value="1" /> </li>
<li><input type="checkbox" class="cat_input" name="subcategory1b" value="1" /> </li>
</l>
</div>
You can iterate over each checkbox and add the label after it.
Example:
$('input[type="checkbox"]').each(function() {
var checkbox = $(this);
checkbox.after($("<label>").attr("for", checkbox.attr("id")));
});
In case your initial input doesn't have an id attribute set, then set it manually first:
$('input[type="checkbox"]').each(function(i, v) {
$(this).attr("id", ("checkbox_" + i))
$(this).after($("<label>").attr("for", $(this).attr("id")));
});
EDIT 1:
Putting this code into <head> is not going to work, as the content that this code addressing is not yet loaded at that time. Either put this code before closing </body> tag or use ready function.
$(function() {
// code above is here
});
According your given markup please see below:
$('.cat_input').each(function() {
var checkbox = $(this);
checkbox.attr('id', 'checkbox'+checkbox.index()); // Adding ID attribute
checkbox.after($("<label for='checkbox"+ checkbox.index() +"'>").text(checkbox.val())); // Adding label with for attribute
});
And HTML I assumed like following:
<input type="checkbox" class="cat_input" name="subcategory1a" value="1">
<input type="checkbox" class="cat_input" name="subcategory1a" value="2">
<input type="checkbox" class="cat_input" name="subcategory1a" value="3">
<input type="checkbox" class="cat_input" name="subcategory1a" value="4">
<input type="checkbox" class="cat_input" name="subcategory1a" value="5">
I always prefer to do it like <label><input /><span></span></label> for me I think its simple to use and to style/css it
$(document).ready(function(){
$('.cat_input').each(function(i){ // index start from 0
i = i + 1;
$(this).val(i).attr('id' , 'checkbox' + i).wrap('<label></label>').closest('label').append('<span>'+i+'</span>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="cat_input" name="subcategory1a" />
<input type="checkbox" class="cat_input" name="subcategory1a" />
<input type="checkbox" class="cat_input" name="subcategory1a" />
<input type="checkbox" class="cat_input" name="subcategory1a" />
<input type="checkbox" class="cat_input" name="subcategory1a" />
<input type="checkbox" class="cat_input" name="subcategory1a" />
<input type="checkbox" class="cat_input" name="subcategory1a" />
<input type="checkbox" class="cat_input" name="subcategory1a" />
the code for first input will be
<label>
<input type="checkbox" class="cat_input" name="subcategory1a" value="1" id="checkbox1"/>
<span>1</span>
</label>
I have a form where I request a lot of data for a join table in cakePHP3.5 project. The string consists of combinations of factors A, B, C and D separated by space. For example: BD AC ABCD AD B CD. I found out how to compose this string for the one such field.
First I write a required combination to textbox Result, then use Add button to stitch them together.
How to repeat this for many without writing a long jQuery? Basically I need to repeat what is below 50 times, but I cannot find proper selectors for all these multiple checkboxes. Checkbox 1 down there is for illustrating purposes to emphasize that I will have different checkboxes and many such input fields.
This is my first jQuery, so please, be patient :)
$(document).ready(function() {
$('.factor-checkbox').click(function() {
var text = $('#result0');
text.val('');
$(".factor-checkbox:checked").each(function() {
text.val(text.val() + $(this).val());
});
});
$("#btn0").click(function(){
var text1 = $('#combinations0');
text1.val(text1.val() + ' ' + $('#result0').val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="A" value="A" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="B" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="C" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="D" class="factor-checkbox">D</label>
<label for="result0">Result </label><input type="text" id="result0"/>
<button type="button" id="btn0">Add</button>
<div class="input checkbox"><label for="items-0-id"><input type="checkbox" name="items[0][id]" value="1" id="items-0-id">1</label></div>
<div class="input text"><label for="Combinations">Combinations</label><input type="text" id="combinations0"/></div>
I would suggest to:
Wrap each repeating block (each with 4 checkboxes, ...etc) in a separate container element: that will facilitate to address the different elements that belong together.
Don't use id attributes where not necessary: for labels you don't need them when you wrap the input inside the label element. Instead use class names. This will facilitate the generation of all the 50 blocks
In each event handler determine the section the click happened in, and then use that as the scope of every other jQuery selection you do (by using the second argument of $() -- or .find().
Here is working snippet with two such blocks:
$(function() {
function mapValues(elem) {
return $(elem).val();
}
$(".factor-checkbox").click(function() {
var $section = $(this).closest(".section");
var $text = $(".result", $section);
$text.val($.map($(".factor-checkbox:checked", $section), mapValues).join(""));
});
$(".add").click(function() {
var $section = $(this).closest(".section");
var $combi = $(".combinations", $section);
$combi.val(($combi.val() + " " + $(".result", $section).val()).trim());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="A" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="B" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="C" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="D" class="factor-checkbox">D</label>
<label>Result <input type="text" class="result"></label>
<button type="button" class="add">Add</button>
<div class="input text">
<label>Combinations <input type="text" class="combinations"></label>
</div>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="A" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="B" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="C" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="D" class="factor-checkbox">D</label>
<label>Result <input type="text" class="result"></label>
<button type="button" class="add">Add</button>
<div class="input text">
<label>Combinations <input type="text" class="combinations"></label>
</div>
</div>
My issue is that i cannot edit the form code output so would like to target radio ids to check or uncheck depending on if a different radio button is selected. Would this is be possible? - i can add a function call on the tag or use jquery - but i cannot edit the form code itself like adding onclick events.
Pseudo code would be:
If #unsubYes is checked Then
uncheck #option1Yes + #option2Yes AND
check #option1No + #option2No
If #unsubNo is checked Then
uncheck #option1No + #option2No AND
check #option1Yes + #option2Yes
Link to JS fiddle html
Any help appreciated.
Cheers,
Chris
$("[name='unsub']").on('change', function(){
var val = $(this).val();
var reverseVal = (val == 'Yes' ? 'No' : 'Yes')
$("input[value='"+reverseVal+"']:not([name='unsub'])").prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<span>Option 1</span><br />
<label>
<input type="radio" name="option1" id="option1Yes" value="Yes">
Yes
</label>
<label>
<input type="radio" name="option1" id="option1No" value="No">
No
</label>
<br /><br />
<span>Option 2</span><br />
<label>
<input type="radio" name="option2" id="option2Yes" value="Yes">
Yes
</label>
<label>
<input type="radio" name="option2" id="option2No" value="No">
No
</label>
<hr />
<span>Unsubscribe from all</span><br />
<label>
<input type="radio" name="unsub" id="unsubYes" value="Yes">
Yes
</label>
<label>
<input type="radio" name="unsub" id="unsubNo" value="No">
No
</label>
<br /><br />
<input type="submit" value="submit">
</form>
Yes of course is possible.
You could do something similar like this
document.querySelector('#unsubYes').addEventListener('change', function() {
if (this.checked) {
// do something if is checked
} else {
// do other thins
}
});
I have two "groups" of checkboxes (although the first group only contains one checkbox), but if user checks the checkbox from the first group I want to restrict the ability of checking the checkboxes from second group...
<div>
<h3>First group</h3>
<label>
<input type="checkbox" value="1" name="group1" />If checked, checks all the checkboxes in 2nd group</label>
<label>
</div>
<div>
<h3>Second Group</h3>
<label>
<input type="checkbox" class="radio" value="1" name="group2" />1</label>
<label>
<input type="checkbox" class="radio" value="1" name="group2" />1</label>
</div>
<div>
<h3>First group</h3>
<label>
<input type="checkbox" value="1" name="group1" id='Grp1'/>If checked, checks all the checkboxes in 2nd group</label>
<label>
</div>
<div>
<h3>Second Group</h3>
<label>
<input type="checkbox" class="radio Grp2" value="1" name="group2" />1</label>
<label>
<input type="checkbox" class="radio Grp2" value="1" name="group2" />1</label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('#Grp1').change(function() {
if($(this).is(":checked"))
{
$('.Grp2').prop('disabled', true);
}
else
{
$('.Grp2').prop('disabled', false);
}
});
</script>
I've used a simple jQuery script to solve it.
initially it didn't exactly do what I wanted it to do, but I've managed to work around it with php as I had to make sure that if someone checked the checkbox from the second group that it didn't go to the database.
$('#checkbox1').click(function() {
if( $(this).is(':checked')) {
$("#checkbox2").hide();
} else {
$("#checksbox2").show();
}
});
As for php I simply used a ternary operator to make sure that if checkbox with id checkbox1 is checked then I want to ignore the rest of the checkboxes...
$smnrs = !empty($_POST['all']) ? explode(';', $_POST['all']) : $_POST['seminars'];
in this case $_POST['all'] refers to the first checkbox that if clicked it hides the div holding the other checkboxes.
I have a few radio buttons, and when I select one of them, I also have to check another one.
For example, if I select yes on a radio button, another radio button must be automatically checked with no.
I tried a few scripts but don't seem to work.
Does anyone know a solution? I'm new in JS.
Thanks in advance!
> Live Demo <
<!--HTML-->
<input type="radio" name="group_1" value="yes" id="r1">Yes<br>
<input type="radio" name="group_1" value="no" id="r2">No<br>
<br>
<input type="radio" name="group_2" value="yes" id="r3">Yes<br>
<input type="radio" name="group_2" value="no" id="r4">No<br>
//Script
$("input[name='group_1']").click(function(){
if(this.value=="yes"){
$("input#r4").attr("checked",true);
}else{
$("input#r3").attr("checked",true);
}
});
$("input[name='group_2']").click(function(){
if(this.value=="yes"){
$("input#r2").attr("checked",true);
}else{
$("input#r1").attr("checked",true);
}
});
I'm not very certain on what you are trying to achieve but by using the "name" attribute this automatically happens...when you check one radio...the others with the same name get set to unchecked.
<input type="radio" name="someoption" value="0" />0
<input type="radio" name="someoption" value="1" />1
<input type="radio" name="someoption" value="2" />2
checking any one of the above will cause the other 2 to be unchecked
unless do you may be mean checkboxes or multiple option sets ?
javascript:
$('#myradio1').bind('change', function () {
$('#myradio3').attr('checked', 'checked');
});
html
<input type="radio" name="cols1" value="1" id="myradio1" />
<input type="radio" name="cols1" value="2" id="myradio2" />
<input type="radio" name="cols2" value="1" id="myradio3" />
<input type="radio" name="cols2" value="2" id="myradio4" />
see working example at http://jsfiddle.net/9jXbv/
For HTML markup like below:
<div>
<input type="radio" name="one" value="yes"> yes
<input type="radio" name="one" value="no"> no
</div>
<div>
<input type="radio" name="two" value="yes"> yes
<input type="radio" name="two" value="no"> no
</div>
you can use this JavaScript code:
$(":radio").on("change", function() {
var that = this;
$(":radio").filter(function() {
return this.value == "no" && this.name != that.name;
}).prop("checked", true);
});
DEMO: http://jsfiddle.net/nKLMX/
With jquery:
$("#radio1").change(function() {
$("#radio2").removeAttr("checked");
});
http://jsfiddle.net/
I've mocked up a pure JS solution to this ( No libraries )
<input type="radio" name="g1" value="1" />Yes
<br />
<input type="radio" name="g1" value="0" />No
<br /><br />
<input type="radio" name="g2" value="1" />Yes
<br />
<input type="radio" name="g2" value="0" />No
<script type="text/javascript">
var g1 = document.getElementsByName('g1'); // store g1 elements
var g2 = document.getElementsByName('g2'); // store g2 elements
// handle click functionality
function radio_checked_event(obj, f) {
if(obj.addEventListener) {
obj.addEventListener('click', f, false);
} else if(obj.attachEvent) {
obj.attachEvent('onclick', f);
}
}
// when you click on g1 yes
radio_checked_event(g1[0], function() {
//set g1 no to checked
g2[1].setAttribute('checked', 'checked');
});
</script>