I have multiple checkbox i want to disable other checkbox(i.e Student, Parent, Faculty) if i select All but if I select Student or others the All checkbox only will be disabled
<input type="checkbox" name="scope[]" value="All">ALL</input>
<input type="checkbox" name="scope[]" value="Student">Student</input>
<input type="checkbox" name="scope[]" value="Parent">Parent</input>
<input type="checkbox" name="scope[]" value="Faculty">Faculty</input>
<input type="checkbox" name="scope[]" value="Others">Others</input>
You can use same name but different ID's to disable your checkbox
<input type="checkbox" name="scope[]" value="All" id="all">ALL</input>
<input type="checkbox" name="scope[]" value="Student" id="student">Student</input>
<input type="checkbox" name="scope[]" value="Parent" id="Parent">Parent</input>
<input type="checkbox" name="scope[]" value="Faculty" id="Faculty">Faculty</input>
<input type="checkbox" name="scope[]" value="Others" id="others">Others</input>
and you can use JavaScript to disable checkbox.
document.getElementById("others").disabled = true;
Related
Is it possible to have multiple radio button groups in a single form? Usually selecting one button deselects the previous, I just need to have one of a group deselected.
<form>
<fieldset id="group1">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
<fieldset id="group2">
<input type="radio" value="">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
</form>
Set equal name attributes to create a group;
<form>
<fieldset id="group1">
<input type="radio" name="group1">value1</input>
<input type="radio" name="group1">value2</input>
</fieldset>
<fieldset id="group2">
<input type="radio" name="group2">value1</input>
<input type="radio" name="group2">value2</input>
<input type="radio" name="group2">value3</input>
</fieldset>
</form>
This is very simple you need to keep different names of every radio input group.
<input type="radio" name="price">Thousand<br>
<input type="radio" name="price">Lakh<br>
<input type="radio" name="price">Crore
</br><hr>
<input type="radio" name="gender">Male<br>
<input type="radio" name="gender">Female<br>
<input type="radio" name="gender">Other
Just do one thing,
We need to set the name property for the same types. for eg.
Try below:
<form>
<div id="group1">
<input type="radio" value="val1" name="group1">
<input type="radio" value="val2" name="group1">
</div>
</form>
And also we can do it in angular1,angular 2 or in jquery also.
<div *ngFor="let option of question.options; index as j">
<input type="radio" name="option{{j}}" value="option{{j}}" (click)="checkAnswer(j+1)">{{option}}
</div>
in input field make name same
like
<input type="radio" name="option" value="option1">
<input type="radio" name="option" value="option2" >
<input type="radio" name="option" value="option3" >
<input type="radio" name="option" value="option3" >
To create a group of inputs you can create a custom html element
window.customElements.define('radio-group', RadioGroup);
https://gist.github.com/robdodson/85deb2f821f9beb2ed1ce049f6a6ed47
to keep selected option in each group, you need to add name attribute to inputs in group, if you not add it then all is one group.
I have a form field where I have two fields one containing countries and other containing memberships and both have check boxes. The problem is that with the code I am using to Select All the countries (check/uncheck all the check boxes for countries) also checks or unchecks the memberships field. I want to differentiate between the two so that I only check countries and not the check boxes in the membership field.
Here is the code I am using:
$("#checkCountries").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});
EDIT: HTML PART
<tr>
<th>Target Memberships</th>
<td>
<div class="target-memberships col-sm-8">
<input type="checkbox" value="1" name="memberships[]" checked> Standard<br>
<input type="checkbox" value="2" name="memberships[]" checked> Premium<br>
<input type="checkbox" value="3" name="memberships[]" checked> Elite<br>
</div>
</td>
</tr>
<tr>
<th>Target Countries</th>
<td>
<input type="checkbox" id="checkCountries" checked> Select All<br>
<div class="target-countries col-sm-8">
<input type="checkbox" name="country[]" id="country" value="Afghanistan" checked> Afghanistan<br>
<input type="checkbox" name="country[]" id="country" value="Albania" checked> Albania<br>
<input type="checkbox" name="country[]" id="country" value="Algeria" checked> Algeria<br>
<input type="checkbox" name="country[]" id="country" value="American Samoa" checked> American Samoa<br>
<input type="checkbox" name="country[]" id="country" value="Andorra" checked> Andorra<br>
<input type="checkbox" name="country[]" id="country" value="Angola" checked> Angola<br>
</div>
</td>
</tr>
Here, input:checkbox is making the code to work on all the checkboxes in the page. I think I need to change this to make it work specifically for that particular field (countries) only. Please help.
If your HTML is like this:
<input type="checkbox" id="checkCountries" checked="checked"> Select All<br>
<div class="target-countries col-sm-8">
<input type="checkbox" name="country[]" id="country-1" value="Afghanistan" checked="checked" /> Afghanistan<br>
<input type="checkbox" name="country[]" id="country-2" value="Albania" checked="checked" /> Albania<br>
<input type="checkbox" name="country[]" id="country-3" value="Algeria" checked="checked" /> Algeria<br>
<input type="checkbox" name="country[]" id="country-4" value="American Samoa" checked="checked" /> American Samoa<br>
<input type="checkbox" name="country[]" id="country-5" value="Andorra" checked="checked" /> Andorra<br>
<input type="checkbox" name="country[]" id="country-6" value="Angola" checked="checked" /> Angola<br>
</div>
In HTML, each id must be unique. The name can be the same as you have to define the array: country[], but the id must be unique to each element. Since input has no closing tag, it is best to add that to the end of the tag, <input type="checkbox" /> for example.
You can use this:
$("#checkCountries").click(function(){
$(".target-countries input[type='checkbox']").prop("checked", $(this).prop("checked"));
});
This targets the Class selector target-countries and the input elements within that are of a type checkbox. It will then set the property checked to match the value of the current checkbox.
Working Snippet:
$(function() {
$("#checkCountries").click(function() {
$(".target-countries input[type='checkbox']").prop("checked", $(this).prop("checked"));
});
});
.target-countries {
margin: 3px;
border: 1px solid #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkCountries" checked="checked"> Select All<br>
<div class="target-countries col-sm-8">
<input type="checkbox" name="country[]" id="country-1" value="Afghanistan" checked="checked" /> Afghanistan<br>
<input type="checkbox" name="country[]" id="country-2" value="Albania" checked="checked" /> Albania<br>
<input type="checkbox" name="country[]" id="country-3" value="Algeria" checked="checked" /> Algeria<br>
<input type="checkbox" name="country[]" id="country-4" value="American Samoa" checked="checked" /> American Samoa<br>
<input type="checkbox" name="country[]" id="country-5" value="Andorra" checked="checked" /> Andorra<br>
<input type="checkbox" name="country[]" id="country-6" value="Angola" checked="checked" /> Angola<br>
</div>
Hope that helps.
I have a problem with checkboxes:
I have 2 menu that open 2 type of checkbox and I would like to have one all checked and the other not-checked when I refresh the page. this is the code:
<div id="Scena" class="tabcontent" onmousedown="if (event.preventDefault) event.preventDefault()">
<input type="checkbox" checked="checked" style="cursor:hand;" onclick="presenter.toggleInstanceVisibilityByName('Parete_frontale',true);"> Parete_frontale </input>
<input type="checkbox" checked="checked" style="cursor:hand;margin-left:50px;" onclick="presenter.toggleInstanceVisibilityByName('Parete_destra', true);"> Parete_destra </input>
<input type="checkbox" checked="checked" style="cursor:hand;margin-left:50px;" onclick="presenter.toggleInstanceVisibilityByName('Parete_sinistra', true);"> Parete_sinistra </input>
<input type="checkbox" checked="checked" style="cursor:hand;margin-left:50px;" onclick="presenter.toggleInstanceVisibilityByName('Parete_p1', true);presenter.toggleInstanceVisibilityByName('Parete_p2', true);presenter.toggleInstanceVisibilityByName('Parete_p3', true);"> Parete_porta </input><br/>
</div>
<div id="Indagini" class="tabcontent">
<input type="checkbox" style="cursor:hand;" onclick="presenter.changeTexture('Parete_p2','back01_cervo.png');setInfoSofia(4);"> Image enhancement </input>
<input type="checkbox" style="cursor:hand;" onclick="presenter.changeTexture('Parete_destra', 'destra_fluo.png');setInfoSofia(5);"> Analisi di Fluorescenza (LIF) </input>
<input type="checkbox" style="cursor:hand;" onclick="setInfoSofia(6)"> Efflorescenze saline </input>
<input type="checkbox" style="cursor:hand;" onclick="presenter.toggleSpotVisibility(HOP_ALL, true); presenter.enableOnHover(!presenter.isOnHoverEnabled()); hotspotSwitch();"> Indagini di caratterizzazione dei materiali </input>
</div>
I want all children of the div with id Scena to be checked and those of the div with id Indagini to be unchecked.
Can anyone help me?
You can use "checked" option.So, by default all the Scena checkboxes will be checked.
<input type="checkbox" checkedstyle="cursor:hand;" onclick="" checked> Image enhancement
I have a list of checkboxes:
<input name="choice" type="checkbox" id="choice1" value="A" />
<input name="choice" type="checkbox" id="choice2" value="B" />
<input name="choice" type="checkbox" id="choice3" value="C" />
<input name="choice" type="checkbox" id="choice4" value="D" />
Name is the same for all but id is different.
I need to check if a particular checkbox (for example the one with id=choice3 is checked.
Tried
if (this.choice.id === "choice3" && this.choice[2].checked) {
alert("checked!");
}
but it does not work - the alert is never reached
P.S. I need to use javascript not jquery
Thats how you do it without jQuery:
Suppose your form is like this:
<form id="myForm" action="test.php">
<input name="choice" type="checkbox" id="choice1" value="A"/>
<input name="choice" type="checkbox" id="choice2" value="B"/>
<input name="choice" type="checkbox" id="choice3" value="C"/>
<input name="choice" type="checkbox" id="choice4" value="D"/>
<input type="button" onclick="validate();" value="Submit form">
</form>
You can do the validation on submit this way:
function validate() {
if (document.getElementById('choice3').checked) {
alert("checked");
} else {
alert("You didn't check it! ");
}
}
On my page I have two radio buttons for yes and two for no.
How I can do it if I check yes in one place it check second yes button or if I check no the second no will check too.
Following is my code:
<fieldset>
<input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>
how i can select two radios at the same time?
You can't have more than one button checked in the same radio group. You need to give the two sets different names. I used search_by_range_A and search_by_range_B. Also IDs have to be unix.
To make it automatically check the other button, use a .change() handler that gets the value and then selects the other checkbox with the same value and checks it.
$(":radio").change(function() {
var value = $(this).val();
$(":radio[value=" + value + "]").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<input checked="checked" id="search_by_range_A_no" name="search_by_range_A" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_A_yes" name="search_by_range_A" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_B_no" name="search_by_range_B" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_B_yes" name="search_by_range_B" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>
And again...ID of every element on a webpage should be Unique!
Use classes instead.
But nevertheless, it is still possible to achieve that. The only thing you have to change in your code is the name of the radio button because all radio buttons with the same name are assumed to be a group, and the web-browser only allows selection of only one of them by default, and you cannot control that.
Therefore change the name to regroup the radio buttons into two different sets.
Then you can do this:
$("[id^='search_by_range']").change(function(){
$("[id='"+$(this).attr("id")+"']").prop("checked", "checked");
});
Here is the JSFiddle demo
you can use javascript for this problem
here i can give you hint how can you can do !
$('#search_by_range_yes').attr('checked','checked');
$('#search_by_range_yes').addAttr('checked');
this would help :)
thanks
In same group radio buttons you can't check more than one. I used two different groups for this.
Find the below code:
<fieldset>
<input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_no" name="search_by_range_second" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_yes" name="search_by_range_second" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>
JS Code:
$(function() {
$(":radio").on("change", function() {
var val = $(this).val(), checked = this.checked;
var others = $(":radio[value='"+val+"']").not(this);
others.prop('checked', true);
});
});
You can find the working demo here: http://jsfiddle.net/26g5rxs6/
1.i understand your problem these happens because all radio button has same name.
2.Same name radio button has one group and select only in that group.
3.You can group radio button by 1. search by no 2. search by range. i updated your code by following code.
<fieldset>
<input checked="checked" id="search_by_range_no" name="search_by_no" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_no" name="search_by_no" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>