I want to write the two names with check boxes and want to show the text in console.log with checking the check boxes in java script.
i have tried this
but its not working
<p>Pakistan <input type="checkbox" id="mycheck" onclick="myFunction()"></p>
<p>India <input type="checkbox1" id="mycheck" onclick="myFunction"></p>
<script>
function myFunction() {
var checkbox = document.getElementById("mycheck")
if (checkBox.checked == true) {
console.log("Pakistan")
}
}
</script>
your checkbox.check has a capital b whereas your declaration has lowercase
<p>Pakistan <input type="checkbox" id="mycheck" onclick="myFunction()"></p>
<p>India <input type="checkbox1" id="mycheck" onclick="myFunction"></p>
<script>
function myFunction(){
var checkbox = document.getElementById("mycheck")
if (checkbox.checked == true){
console.log("Pakistan")
}
}
</script>
Best way to do this would be adding this to your onclick function, which will reference the checkbox for clicked element. You can then check if the checkbox is checked and print out the text of the parent element to get the "checkbox name"
Also make sure that you have type = "checkbox" not checkbox1, that is not a correct type. You also want to avoid duplicate ids, change id="mycheck" to a class or name them differently.
working snippet:
<p>Pakistan <input type="checkbox" id="mycheck1" onclick="myFunction(this)"></p>
<p>India <input type="checkbox" id="mycheck2" onclick="myFunction(this)"></p>
<script>
function myFunction(box) {
if (box.checked == true) {
console.log(box.parentElement.textContent)
}
}
</script>
Firstly, IDs are unique, so pass this into the function and check if it's checked - then console.log the text inside the parent:
function myFunction(checkbox) {
if (checkbox.checked) {
console.log(checkbox.parentNode.textContent);
}
}
<p>Pakistan <input type="checkbox" onclick="myFunction(this)"></p>
<p>India <input type="checkbox" onclick="myFunction(this)"></p>
function myFunction(chbx) {
if(chbx.checked == true) {
console.log(chbx.parentElement.textContent);
}
}
<p>Pakistan <input type="checkbox" onclick="myFunction(this)"></p>
<p>India <input type="checkbox" onclick="myFunction(this)"></p>
Related
I want to disable by a textbox using a class name and id. Can someone tell me why this doesn't work. It works if I get the elements by just an Id.
function disableText() {
var textbox = document.getElementByClassName("text");
if (document.getElementById("check").checked == true) {
textbox[0].disabled = true;
} else {
textbox[0].disabled = false;
}
}
<input type="checkbox" id="check" value="check" onclick="disableText()">
<input class="text" type="textbox">
Two typos and no trigger are the problem.
Typos:
getElementByClassName should be getElementsByClassName (plural Elements)
disable should be disabled (past tense)
Trigger:
onchange, onclick, oninput then ="disableText()" on the checkbox
function disableText() {
var textbox = document.getElementsByClassName("text");
if (document.getElementById("check").checked == true) {
textbox[0].disabled = true;
} else {
textbox[0].disabled = false;
}
}
<input type="checkbox" id="check" value="check" onclick="disableText()">
<input class="text" type="textbox">
Or to not use checkbox validation at all just set disabled to checkbox value
function disableText() {
var textbox = document.getElementsByClassName("text");
textbox[0].disabled = document.getElementById("check").checked;
}
<input type="checkbox" id="check" value="check" onclick="disableText()">
<input class="text" type="textbox">
You can do it in just one line, without JS inside HTML code.
check.onclick = () => {document.getElementsByClassName("text")[0].disabled = check.checked};
<input type="checkbox" id="check" value="check">
<input class="text" type="textbox">
but the value is only displayed when I click on the checkbox and it does not display the pre-selected values, I want it to show the selected results even if I do not click the checkbox, please correct this code Help me or give me some example code so I can add, thank you!
<script type="text/javascript">
function thayTheLoai() {
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
document.getElementById("input").value = huunhan_theloai.join(", ");
}
</script>
<label for="default" onclick="thayTheLoai();" class="btn btn-default">
<input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" ></input>
</label>
<input id="input" type="text"></input>
<script>
$('#theloai1').prop('checked', true);
</script>
This is demo : https://anifast.com/includes/test.php, I want to not need to click the checkbox and still display the checked results
Use this code and don't forget to use jquery library.
$(document).ready(function(){
$('#theloai1').prop('checked', true);
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
document.getElementById("input").value = huunhan_theloai.join(", ");
})
function thayTheLoai() {
if ($('input[name="theloai[]"]:checked').length > 0) {
$("#input").val(1);
}else{
$("#input").val(0);
}
}
You have 2 ways of doing it:
you update the input field from your PHP and MySQL to have the checked="checked" on the selected input fields and the run the function on load:
JS
function thayTheLoai() {
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
$('#input').val( huunhan_theloai.join(", ") );
}
$(document).ready(function(){
thayTheLoai();
});
HTML
<label for="theloai1" onclick="thayTheLoai();" class="btn btn-default">
<input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" />
</label>
<label for="theloai2" onclick="thayTheLoai();" class="btn btn-default">
<input type="checkbox" value="2" id="theloai2" class="badgebox" name="theloai[]" checked="checked" />
</label>
<input id="input" type="text"/>
if you want to update the input field using the $('#theloai1').prop('checked', true);, you should change it so that it also triggers the onchanged event on the input field like this:
$('#theloai1').prop('checked', true).trigger('change');
NOTES
this code is not tested, but it should work
make sure you write valid HTML otherwise you might get unexpected results (I fixed your HTML as well)
<label for="default" class="btn btn-default">
<input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="2" id="theloai2" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="3" id="theloai3" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="4" id="theloai4" class="badgebox" name="theloai[]" ></input>
</label>
<input id="input" type="text"></input>
$(document).ready(function(){
$('#theloai1').prop('checked', true);
var huunhan_theloai = [];
$.each($("input[type='checkbox']:checked"), function() {
huunhan_theloai.push($(this).val());
});
document.getElementById("input").value = huunhan_theloai.join(", ");
})
$("input[type='checkbox']").on("change", function(){
checked_id = $(this).attr("id");
if ($(this).prop("checked") == true) {
$("input[type='checkbox']").each(function(){
if ($(this).attr("id") != checked_id) {
$(this).prop("checked", false);
}
})
$("#input").val($(this).val());
}else{
$("#input").val('some default value');
}
})
I would like to create an alert that displays if none of the choices in my check box have been displayed.
<script>
function mFunction () {
if (!!this.form.checkbox.checked) {
alert('not checked');
return false;
}
};
</script>
js above
<body>
<form>
<input type="checkbox" name="choice1" value="choice1" id="confirm">choice 1<br>
<input type="checkbox" name="choice2" value="choice2" >choice 2<br>
<input type="checkbox" name="choice3" value="choice3">choice 3<br><br>
<input type="submit" value="Submit" onclick="mFunction()">
</form>
I wanted an alert if nothing selected, and no alert if something is selected.
you can check this by
[...document.querySelectorAll("input[type='checkbox']")].some(i=>i.checked)
function mFunction (e)
{
if(![...document.querySelectorAll("input[type='checkbox']")].some(i=>i.checked))
{
alert('not checked');
e.preventDefault();
}
};
function checkForm(t,e) {
e.preventDefault();
console.log('checked');
};
<form onsubmit="checkForm(this,event);">
<input type="checkbox" name="choice1" value="choice1" id="confirm">choice 1<br>
<input type="checkbox" name="choice2" value="choice2" >choice 2<br>
<input type="checkbox" name="choice3" value="choice3">choice 3<br><br>
<input type="submit" value="Submit" onclick="mFunction(event)">
</form>
You can directly check the checked items like below.
function mFunction () {
let matches = document.querySelectorAll('input[type=checkbox]:checked');
if (matches.length < 1) {
alert('not checked');
return false;
}
};
If its plain javascript, you can try adding an event listener when checkbox is clicked.
Maintain an array in the listener. If something is selected maintain a checkbox selection counter or boolean tracking selection.
var checkbox = document.querySelector("input[name=checkbox]");
checkbox.addEventListener( 'change', function() {
if(this.checked) {
// Checkbox is checked..
} else {
// Checkbox is not checked..
}
});
How to use javascript to checked and unchecked with function onclick like this ?
http://jsfiddle.net/A4wxX/98/
First, When you checked checkbox id="yyy" , checkbox id="yyy" wil Checked and checkbox id="xxx" wil Unchecked
And then, When you checked checkbox id="xxx" ,checkbox id="xxx" wil Checked checkbox id="yyy" wil Unchecked
on my code i must to double checked on checkbox for do that, how can i apply my code for single click ?
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
function SetCard() {
var xxx_val = document.getElementById('xxx').checked
var yyy_val = document.getElementById('yyy').checked
if(xxx_val === true)
{
document.getElementById('yyy').checked = false;
}
if(yyy_val === true)
{
document.getElementById('xxx').checked = false;
}
}
</script>
<input type="checkbox" id="xxx" onclick="SetCard()" checked> xxx
<br>
<input type="checkbox" id="yyy" onclick="SetCard()"> yyy
HTML
<input type="checkbox" id="xxx" onclick="SetCard(event)" checked> xxx
<br>
<input type="checkbox" id="yyy" onclick="SetCard(event)"> yyy
JS
function SetCard(e) {
if (e && e.target) {
if (e.target.id === 'xxx') {
document.getElementById('yyy').checked = false;
}
else if (e.target.id === 'yyy') {
document.getElementById('xxx').checked = false;
}
}
Fiddle: http://jsfiddle.net/95pnsq3q/
JS :
$(document).ready(function(){
$('.checkbox').click(function(){
$('input[type=checkbox]').prop('checked',false)
$(this).prop('checked',true)
});
})
HTML :
<input type="checkbox" id="xxx" class="checkbox" checked> xxx
<br>
<input type="checkbox" id="yyy" class="checkbox"> yyy
I wrote this code to switch between radio buttons and show my custom alert.
<script>
function test() {
if (radio[0].checked = true) {
alert("hello1");
}
if (radio[1].checked = true) {
alert("hello2");
}
}
</script>
<input type="radio" onclick="test()" value="0">
<input type="radio" onclick="test()" value="1">
When check any of radio buttons it must show specific alert.
What is wrong?
You should name your radio buttons, and call them from javascript.
<script>
function test() {
if (document.getElementById('radio1').checked == true) {
alert("hello1");
}
if (document.getElementById('radio2').checked == true) {
alert("hello2");
}
}
</script>
<input type="radio" id="radio1" onclick="test()" value="0">
<input type="radio" id="radio2" onclick="test()" value="1">
Two things you need to take note here:
1) You must use the 'name' attribute in the radio button. Otherwise you won't be able to check the radio button.
2) You cannot use radio[0] to point to the radio button. You can assign an ID to it and use getElementById method to use it in Javascript. Another easy way is to pass the object to the function. Please refer to the sample code below:
<script>
function test(radioObj) {
if(radioObj.value == "0")
alert("Hello1");
else if (radioObj.value == "1")
alert("Hello2");
}
</script>
<input type="radio" name="test" onclick="test(this)" value="0">
<input type="radio" name="test" onclick="test(this)" value="1">
radio[0] and radio[1] are defined in your html but not in your javascript. You can try using JQuery or one of the many javascript selector libraries. Or use getElementById