the following is my code
<input type="checkbox" id="checkbox" value="brand.php?brand=bmw" name="bmw" <?php echo $checked; ?> > BMW</li>
<input type="checkbox" id="checkbox" value="brand.php?brand=toyota" name="toyota"> Toyota</li>
<input type="checkbox" id="checkbox" value="brand.php?brand=farari" name="farari" checked > Farari</li>
<input type="checkbox" id="checkbox" value="brand.php?brand=nissan" name="nissan" checked > Nissan</li>
my javascript/jquery script is
<script>
$(document).ready(function() {
var ckbox = $('#checkbox');
var url = '';
console.log(url);
$('input').on('click', function() {
if(ckbox.is(':checked')) {
var url = $(':checked').val();
console.log(url);
window.location = url;
}
});
});
I want the page to go to the newly checked checkbox.How to make that happen?
id should be a unique value in the whole document. Change your HTML to have unique id's for each checkbox and modify your jQuery selector based on class or input type.
Check below example.
$(document).ready(function() {
$('.chkbox').on('change', function() {
if ($(this).is(':checked')) {
var url = $(this).val();
console.log(url);
window.location = url;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1" class="chkbox" value="brand.php?brand=bmw" name="bmw"> BMW</li>
<input type="checkbox" id="checkbox2" class="chkbox" value="brand.php?brand=toyota" name="toyota"> Toyota</li>
<input type="checkbox" id="checkbox3" class="chkbox" value="brand.php?brand=farari" name="farari" checked> Farari</li>
<input type="checkbox" id="checkbox4" class="chkbox" value="brand.php?brand=nissan" name="nissan" checked> Nissan</li>
$(document).ready(function() {
var ckbox = $('.clscheckboxes');
var url = '';
$('input[type=checkbox]').change(function() {
if ($(this).is(':checked')) {
var url = $(this).val();
console.log(url);
alert(url);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1" class="clscheckboxes" value="brand.php?brand=bmw" name="bmw" <?php echo $checked; ?> > BMW</li>
<input type="checkbox" id="checkbox2" class="clscheckboxes" value="brand.php?brand=toyota" name="toyota"> Toyota</li>
<input type="checkbox" id="checkbox3" class="clscheckboxes" value="brand.php?brand=farari" name="farari" checked > Farari</li>
<input type="checkbox" id="checkbox4" class="clscheckboxes" value="brand.php?brand=nissan" name="nissan" checked > Nissan</li>
One more sample code. Hope it'll work.
JQuery Code
$( ".checkbox" ).click(function() {
if ($(this).is(":checked"))
{
var page_url = $(this).val();
window.location = page_url;
}
});
HTML
<input type="checkbox" class="checkbox" value="brand.php?brand=bmw" name="bmw"> BMW</li>
<input type="checkbox" class="checkbox" value="brand.php?brand=toyota" name="toyota"> Toyota</li>
<input type="checkbox" class="checkbox" value="brand.php?brand=farari" name="farari"> Farari</li>
<input type="checkbox" class="checkbox" value="brand.php?brand=nissan" name="nissan"> Nissan</li>
Related
I would like to request assistance on how can I disable a specific checkbox.
Scenario:
If I clicked the 'Yes to all' checkbox - the other checkbox will be disabled (Q1 to Q4)
If I selected one or more on the Q1 to Q4 checkbox - 'Yes to all' checkbox will be disabled
Code:
$('input[type=checkbox]').change(function() {
if ($(this).is(':checked')) {
$('input[type=checkbox]').attr('disabled', true);
$(this).attr('disabled', '');
} else {
$('input[type=checkbox]').attr('disabled', '');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="Q1" value="1" />Q1
<input type="checkbox" name="Q2" value="2" />Q2
<input type="checkbox" name="Q3" value="3" />Q3
<input type="checkbox" name="Q4" value="4" />Q4
<input type="checkbox" name="QYTA" value="YTA" />Yes to all
You need to check weather the checkboxes selected or not as per your requirement,
Condition 1: if question selected length is more than 1, then disable the YTA
condition 2: if YTA is selected then disable all the Questions
If need anything else, please let me know.
$('.yta').change(function() {
if($('.yta:checked').length){
$('.q').attr('disabled', true);
}else {
$('.q').removeAttr("disabled");
}
});
$('.q').change(function() {
if($('.q:checked').length){
$('.yta').attr('disabled', true);
}else {
$('.yta').removeAttr("disabled");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="q" type="checkbox" name="Q1" value="1" />Q1
<input class="q" type="checkbox" name="Q2" value="2" />Q2
<input class="q" type="checkbox" name="Q3" value="3" />Q3
<input class="q" type="checkbox" name="Q4" value="4" />Q4
<input class="yta" type="checkbox" name="QYTA" value="YTA" />Yes to all
My answer with my philosophy:
Avoid jQuery if you can
Use small functions that do one thing
Have in mind that the same should work when used multiple times in a document
Prevent magic values in your code
Encapsulate as much as possible
So this seems like overkill, but this works
{
function checkAnswers(qNames, allName) {
const qSelector = qNames.map(e => `[name="${e}"]`).join(',')
const allSelector = `[name="${allName}"]`
const selector = `${qSelector},${allSelector}`;
const getValue = () => Array.from(document.querySelectorAll(selector)).filter(e => e.checked).map(e => ({[e.name]: e.value}))
const checkQ = value => value.map(e => Object.keys(e)[0]).filter(value => qNames.includes(value)).length > 0;
const checkAll = value => value.map(e => Object.keys(e)[0]).includes(allName)
const qDisable = () => Array.from(document.querySelectorAll(qSelector)).forEach(e => e.disabled = true)
const qEnable = () => Array.from(document.querySelectorAll(qSelector)).forEach(e => e.disabled = false)
const allDisable =() => document.querySelector(allSelector).disabled = true
const allEnable = () => document.querySelector(allSelector).disabled = false
return e => {
if (!e.target.closest(selector)) {return}
const value = getValue();
if (checkQ(value)) {
allDisable();
} else if (checkAll(value)) {
qDisable()
} else {
allEnable();
qEnable();
}
}
}
let qNames = ['QA1','QA2','QA3','QA4']
let allName = 'QAYTA'
document.addEventListener('change', checkAnswers(qNames, allName))
qNames = ['QB1','QB2','QB3','QB4']
allName = 'QBYTA'
document.addEventListener('change', checkAnswers(qNames, allName))
}
:disabled + label {
color: lightgray;
}
<input type="checkbox" id="QA1" name="QA1" value="1"/><label for="QA1">Question 1</label><br>
<input type="checkbox" id="QA2" name="QA2" value="2"/><label for="QA2">Question 2</label><br>
<input type="checkbox" id="QA3" name="QA3" value="3"/><label for="QA3">Question 3</label><br>
<input type="checkbox" id="QA4" name="QA4" value="4"/><label for="QA4">Question 4</label><br>
<input type="checkbox" id="QAYTA" name="QAYTA" value="YTA"/><label for="QAYTA">Yes to all</label>
<br><br>
<input type="checkbox" id="QB1" name="QB1" value="1"/><label for="QB1">Question 1</label><br>
<input type="checkbox" id="QB2" name="QB2" value="2"/><label for="QB2">Question 2</label><br>
<input type="checkbox" id="QB3" name="QB3" value="3"/><label for="QB3">Question 3</label><br>
<input type="checkbox" id="QB4" name="QB4" value="4"/><label for="QB4">Question 4</label><br>
<input type="checkbox" id="QBYTA" name="QBYTA" value="YTA"/><label for="QBYTA">Yes to all</label>
You can do something like this.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="q1_q4" type="checkbox" name="Q1" value="1"/>Q1
<input class="q1_q4" type="checkbox" name="Q2" value="2"/>Q2
<input class="q1_q4" type="checkbox" name="Q3" value="3"/>Q3
<input class="q1_q4" type="checkbox" name="Q4" value="4"/>Q4
<input class="yta" type="checkbox" name="QYTA" value="YTA"/>Yes to all
<script>
$(".q1_q4").on('change', function(){
$(".yta").attr("disabled","disabled");
});
$(".yta").on('change', function(){
$(".q1_q4").attr("disabled","disabled");
});
</script>
See the perfect answer.
$('input[type=checkbox]').change(function() {
if ($(this).is('input[name="QYTA"]')) {
if ($(this).is(':checked')) {
$('input[type=checkbox][name!="QYTA"]').attr('disabled', true);
} else {
$('input[type=checkbox][name!="QYTA"]').attr('disabled', false);
}
} else {
if ($(this).is(':checked')) {
$('input[type=checkbox][name="QYTA"]').attr('disabled', true);
} else if($('input[type=checkbox][name!="QYTA"]:checked').length == 0) {
$('input[type=checkbox][name="QYTA"]').attr('disabled', false);
}
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="Q1" value="1" />Q1
<input type="checkbox" name="Q2" value="2" />Q2
<input type="checkbox" name="Q3" value="3" />Q3
<input type="checkbox" name="Q4" value="4" />Q4
<input type="checkbox" name="QYTA" value="YTA" />Yes to all
You can use the .prop function in jQuery to add and remove the disabled attribute easily. You would need to refine the selectors if you are using other checkboxes on the same page.
$('input[type=checkbox]').change(function() {
if (this.name == "QYTA" && this.checked) {
$('input[type=checkbox][name!="QYTA"]').prop("disabled", true);
} else if (this.name != "QYTA" && this.checked) {
$('input[type=checkbox][name="QYTA"]').prop("disabled", true);
} else {
$('input[type=checkbox]').prop("disabled", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="Q1" value="1" />Q1
<input type="checkbox" name="Q2" value="2" />Q2
<input type="checkbox" name="Q3" value="3" />Q3
<input type="checkbox" name="Q4" value="4" />Q4
<input type="checkbox" name="QYTA" value="YTA" />Yes to all
My solution is to set up onchange event handler for each checkbox.
And then depending on the element which triggered the onchange event to perform a different operation.
if QYTA trigger the onchange then disable the Q1 to Q4 checkbox.
Else
disable the QYTA checkbox.
I make use of the logic difference between the checked and disabled attribute.
Here is my solution:
$("input[type='checkbox']").each(function() {
$(this).on('change', function() {
if (this.name=='QYTA'){
for (let i=1;i<5;i++){
$("input[type='checkbox'][name='Q"+i+"']").attr('disabled', this.checked);
}
} else{
$("input[type='checkbox'][name='QYTA']").attr('disabled', this.checked);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="Q1" value="1"/>Q1
<input type="checkbox" name="Q2" value="2"/>Q2
<input type="checkbox" name="Q3" value="3"/>Q3
<input type="checkbox" name="Q4" value="4"/>Q4
<input type="checkbox" name="QYTA" value="YTA"/>Yes to all
hope help u
$("input[type='checkbox']").each(function(){
$(this).on('click', function(){
var el = $("input[type='checkbox']").not($("input[name='QYTA']"));
var elAl = $("input[name='QYTA']");
if($(this).not(elAl).length == 0) {
if(elAl.is(':checked')){
el.attr('disabled',true);
} else {
$("input[type='checkbox']").removeAttr("disabled");
}
} else if(el.is(':checked')){
elAl.attr('disabled',true);
} else {
$("input[type='checkbox']").removeAttr("disabled");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="Q1" value="1"/>Q1
<input type="checkbox" name="Q2" value="2"/>Q2
<input type="checkbox" name="Q3" value="3"/>Q3
<input type="checkbox" name="Q4" value="4"/>Q4
<input type="checkbox" name="QYTA" value="YTA"/>Yes to all
I would like to add checked checkbox values as url parameter to my link.
This is what I have amongst others:
<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1"></label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1"></label>
<script>
$(".checkbox").on("change", function() {
var values = [];
$('.checkbox:checked').each(function() {
var result = $(this).val();
values.push(result);
});
var key = $(".link").html(values.join("&"));
document.write('Open here');
});
</script>
The expected result is "http://www.example.com/test.html?bx1=1&bx2=1".
I hope someone can help me with this.
Thanks for these lines:
<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1"></label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1"></label>
<a class="link" href="http://www.example.com/test.html">Open here</a>
<script>
$(".checkbox").on("change", function() {
console.log('fzef');
var values = [];
$('.checkbox:checked').each(function() {
var result = $(this).val();
values.push(result);
});
$(".link").attr('href', 'http://www.example.com/test.html?' + values.join("&"));
});
// Init link on page load
$(".checkbox").trigger("change");
</script>
I get a &on& between my values and it does not work on IE. Any idea? Thanks!
You can do like this:
<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1"></label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1"></label>
<a class="link" href="http://www.example.com/test.html">Open here</a>
<script>
$(".checkbox").on("change", function() {console.log('fzef');
var values = [];
$('.checkbox:checked').each(function() {
var result = $(this).val();
values.push(result);
});
$(".link").attr('href', 'http://www.example.com/test.html?' + values.join("&"));
});
// Init link on page load
$(".checkbox").trigger("change");
</script>
Wrap the checkboxes in a form, give them names and let jQuery do the work with .serialize():
$(function() {
$("form").on("change", function() {
var href = "http://www.example.com/test.html",
params = $(this).serialize();
if (params.length > 0) {
href += "?" + params;
}
console.log(href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="box1" name="bx1" type="checkbox" class="checkbox" value="1" />bx1
<input id="box2" name="bx2" type="checkbox" class="checkbox" value="1" />bx2
</form>
The correction you need to do is in the line
var key = $(".link").html(values.join("&"));
You need to change it to
var key = values.join("&");
Why?
Because there is no .link selector in your code.
try like this:
you need with document.write()
document.write('http://www.example.com/test.html?' + values.join('&')+'');
OR
$("button").on("click", function() {
var values = [];
$('.checkbox:checked').each(function() {
var result = $(this).val();
values.push(result);
});
$('#url').attr('href','http://www.example.com/test.html?' + values.join('&') );
$('#url').html('http://www.example.com/test.html?' + values.join('&'))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="box1" type="checkbox" class="checkbox" value="bx1=1"> <label for="box1">first</label>
<input id="box2" type="checkbox" class="checkbox" value="bx2=1"> <label for="box1">second</label>
<button >Go</button>
<a id="url"></a>
I found this code on codeLAB and I'm trying to get true result only if "Cricket" and "Boxing" are checked. Currently it works if both of them are checked, but also when the others are selected.
https://jsfiddle.net/kubus1234/oksm8eaw/
$("button").click(function() {
var favorite = [];
$.each($("input[name='sport']:checked"), function() {
favorite.push($(this).val());
});
var test = [];
$.each($("input[name='sport']:checked"), function() {
test.push($(this).val());
});
if (favorite[1] == "cricket" || test[1] == "boxing") {
alert("Your are the best");
} else {
alert("Your are looser");
}
});
Any solution?
Not sure why you traversed the selected checkboxes twice, but here's one way to get your results:
$(document).ready(function() {
$("button").click(function() {
var selected = $("input[name='sport']:checked").toArray().map(function(checkbox) {
return $(checkbox).val();
});
if (selected.length === 2 && selected[0] === "cricket" && selected[1] === "boxing") {
alert("You are the best");
} else {
alert("You lose");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<h3>Select your favorite sports:</h3>
<label>
<input type="checkbox" value="football" name="sport">Football</label>
<label>
<input type="checkbox" value="baseball" name="sport">Baseball</label>
<label>
<input type="checkbox" value="cricket" name="sport">Cricket</label>
<label>
<input type="checkbox" value="boxing" name="sport">Boxing</label>
<label>
<input type="checkbox" value="racing" name="sport">Racing</label>
<label>
<input type="checkbox" value="swimming" name="sport">Swimming</label>
<br>
<button type="button">Get Values</button>
</form>
This would be easily researchable but I'll post a solution anyway
1) I gave the checkboxes ids
2) I changed the JavaScript to check if both checkboxes are checked at once with .is(":checked")
<form>
<h3>Select your favorite sports:</h3>
<label><input type="checkbox" id="chkFootball" value="football" name="sport"> Football</label>
<label><input type="checkbox" id="chkBaseball" value="baseball" name="sport"> Baseball</label>
<label><input type="checkbox" id="chkCricket" value="cricket" name="sport"> Cricket</label>
<label><input type="checkbox" id="chkBoxing" value="boxing" name="sport"> Boxing</label>
<label><input type="checkbox" id="chkRacing" value="racing" name="sport"> Racing</label>
<label><input type="checkbox" id="chkSwimming" value="swimming" name="sport"> Swimming</label>
<br>
<button type="button">Get Values</button>
</form>
$(document).ready(function() {
$("button").click(function(){
if ($('#chkCricket').is(':checked') && $('#chkBoxing').is(':checked')) {
alert("Checked");
}
else {
alert("Not checked");
}
});
});
https://jsfiddle.net/oksm8eaw/2/
Please don't use javascript alerts. Alerts cause cancer...
... instead use ids, and jQuery html(): add this to the HTML: <div id="result"></div>
Solution
$(document).ready(function() {
$("button").click(function(){
var matchCount = 0;
$('input').each(function(){
if( this.value == "cricket" || this.value == "boxing") {
if(this.checked) matchCount++;
}
});
if(matchCount>1){
$("#result").html("YUP!");
} else {
$("#result").html("NOPE!");
}
});
});
I have plenty of check boxes with different value.
for ($i=0;$i<10;$i++) {
echo "<input type='checkbox' name='id[]'> <input type='checkbox' name='title[]'>
}
How to do if i check the check box name id and check box name title will check too?
$("input[type='checkbox'][name='id[]']").on('change',function(){
var isChecked = $("input[type='checkbox'][name='id[]']").prop('checked');
if(isChecked ){
$("input[type='checkbox'][name='title[]']").prop('checked', true);
}
else{
$("input[type='checkbox'][name='title[]']").prop('checked', false);
}
});
demo
try this by JS..
<?php
echo '<input type="checkbox" id="chk1" name="id[]"> <input type="checkbox" name="title[]" id="chk2">';
?>
<script>
$('#chk1').click(function(){
if($("#chk1:checked").length)
$('#chk2').prop('checked', true);
});
</script>
Use this JS Code
<input type="checkbox" id="check">
<input type="checkbox" class="chk">
<input type="checkbox" class="chk">
<input type="checkbox" class="chk">
<input type="checkbox" class="chk">
<script>
var x=document.getElementById('check').checked;
if(x==true)
{
var length=document.getElementsByClassName('chk').length;
for(i=0;i<=length; i++)
{
document.getElementsByClassName('chk')[i].checked=true;
}
}
else
{
var length=document.getElementsByClassName('chk').length;
for(i=0;i<=length; i++)
{
document.getElementsByClassName('chk')[i].checked=true;
}
}
</script>
Please help, I failed to code the checkbox that can only checked 1 item. Any help would be appreciated. Thanks
Html
<input type="checkbox" name="<%=Name %>" onClick="return checkbox(this)" >
Javascript
function checkbox(a) {
var Count = 0;
if (a.checked)
{
Count = Count + 1;
}
if (Count == 2)
{
alert('choose One Please');
return false;
}
}
You are declaring count inside a method hence it will always be initialised to 0 when you click on check box. Hence declare count globally and maintain the count.
var NewCount = 0;// global declaration
function KeepCount(a){
if (a.checked){
NewCount = NewCount + 1;
}else{
NewCount = NewCount - 1;
}
if(NewCount>1){
alert('Pick Just One Please');
return false;
}
}
UPDATE:
Another approach if you don't want to add variable globally:
HTML
Group 1
<input type="checkbox" value="1" name="test[1][]" onclick="addClassCheck(this)"/>
<input type="checkbox" value="1" name="test[1][]" onclick="addClassCheck(this)"/>
<input type="checkbox" value="1" name="test[1][]" onclick="addClassCheck(this)"/>
<br/>
Group 2
<input type="checkbox" value="1" name="test[2][]" onclick="addClassCheck(this)"/>
<input type="checkbox" value="1" name="test[2][]" onclick="addClassCheck(this)"/>
<input type="checkbox" value="1" name="test[2][]" onclick="addClassCheck(this)"/>
JavaScript
function addClassCheck(element){
if(element.checked){
element.classList.add("marked");
}else{
element.classList.remove("marked");
}
if(document.getElementsByClassName("marked").length>1){
alert("Please select only one check box");
element.checked=false;
element.classList.remove("marked");
}
}
Fiddle demo
Group your checkboxs as
<input type="checkbox" class="radio" value="1" name="test[1][]" />
<input type="checkbox" class="radio" value="1" name="test[1][]" />
<input type="checkbox" class="radio" value="1" name="test[1][]" />
<br/>
Group 2
<input type="checkbox" class="radio" value="1" name="test[2][]" />
<input type="checkbox" class="radio" value="1" name="test[2][]" />
<input type="checkbox" class="radio" value="1" name="test[2][]" />
Query
$("input:checkbox").click(function() {
if ($(this).is(":checked")) {
var group = "input:checkbox[name='" + $(this).attr("name") + "']";
$(group).prop("checked", false);
$(this).prop("checked", true);
} else {
$(this).prop("checked", false);
}
});
DEMO