I have a List of Menus which has a property of IsChecked.
I wrote the checkbox list and set the asp-for
#foreach (var a in Model.Menus.FindAll(x => x.Pid == item.ID))
{
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkbox1" asp-for="#a.IsChecked" />
<label for="checkbox1" class="form-check-label">#a.Name</label>
</div>
}
But in the OnPostAsync function the Menus is null. I have already declared the Menus :public List<Model.Menus>Menus{get;set;}
and the OnPostAsync is activated.
How could I do?
Here's how to use the asp-for tag helper with your collection:
#{
var index = 0;
// Required or the index won't match
Model.Menus = Model.Menus.FindAll(x => x.Pid == item.ID).ToList();
}
#foreach (var a in Model.Menus)
{
<div class="form-check">
<input class="form-check-input" type="checkbox" asp-for="#Model.Menus[index].IsChecked" />
<label asp-for="#Model.Menus[index].IsChecked" class="form-check-label">#a.Name</label>
<input type="hidden" asp-for="#Model.Menus[index].Id" />
<input type="hidden" asp-for="#Model.Menus[index].Name" />
</div>
index++;
}
Related
How can I toggle a checkbox by using a text input check and check automatically if it exists in the list?
For example :
if you write 222 in the input with id=222 will be checked
if already checked it will be unchecked
if is not found an alert will be shown
$(document).ready(function() {
$('#Scan').on('keypress', function(e) {
if (e.which == 13) {
Scan = $('#Scan').val();
//if value exsit in the list -> checked
//if value checked -> dechecked
//if value not exist -> alert not exist
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="Scan" name="Scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus>
<br/>
<input class="custom-control-input" type="checkbox" id="111" value="111">
<label for="111" class="custom-control-label">111</label>
<br/>
<input class="custom-control-input" type="checkbox" id="222" value="222">
<label for="222" class="custom-control-label">222</label>
<br/>
<input class="custom-control-input" type="checkbox" id="333" value="333">
<label for="333" class="custom-control-label">333</label>
<br/>
<input class="custom-control-input" type="checkbox" id="444" value="444">
<label for="444" class="custom-control-label">444</label>
<br/>
<input class="custom-control-input" type="checkbox" id="555" value="555">
<label for="555" class="custom-control-label">555</label>
You can check if your result collection has elements in it by using .length.
$(document).ready(function() {
$('#Scan').on('keypress', function(e) {
if (e.which == 13) {
Scan = $('#Scan').val();
target = $(`#${Scan}`);
if (target.length) {
target.prop('checked', !target.prop('checked'));
} else {
alert("Not found");
}
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="Scan" name="Scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus>
<br/>
<input class="custom-control-input" type="checkbox" id="111" value="111">
<label for="111" class="custom-control-label">111</label>
<br/>
<input class="custom-control-input" type="checkbox" id="222" value="222">
<label for="222" class="custom-control-label">222</label>
<br/>
<input class="custom-control-input" type="checkbox" id="333" value="333">
<label for="333" class="custom-control-label">333</label>
<br/>
<input class="custom-control-input" type="checkbox" id="444" value="444">
<label for="444" class="custom-control-label">444</label>
<br/>
<input class="custom-control-input" type="checkbox" id="555" value="555">
<label for="555" class="custom-control-label">555</label>
Reference for template literals, just in case.
Here is an example using your conditions specified in question.
My alert is not a true js alert as that will halt any further input changes, so i've created an alert function to show if [name="scan"] input value exists in your checkbox input ids.
See comments in my script...
// create input ids array
let input_ids = [];
// for each checkbox type input id
$('[type="checkbox"]').each(function() {
// get the input id
let input_id = $(this).attr('id');
// add input id to input ids array
input_ids.push(input_id);
});
// on input change in doc for elem [name="scan"]
$(document).on('input', '[name="scan"]', function(e) {
// [name="scan"] current input val
let val = e.target.value;
// if val exist in input ids array
if ($.inArray(val, input_ids) >= 0) {
// get this input by id
let $input = $('#' + e.target.value);
// if input is checked
if ($input.prop('checked')) {
// uncheck input
$input.prop('checked', false);
} else {
// else check input
$input.prop('checked', true);
}
} else {
// run alert
alert(e);
}
// stop propagation
e.stopPropagation();
});
// not found alert
function alert(e) {
// activate alert class
$('.alert').addClass('active');
// time out to hide
setTimeout(function() {
// remove class
$('.alert').removeClass('active');
}, 1000);
}
.alert {
position: fixed;
top: 10px;
right: 10px;
background: red;
padding: .25rem .5rem;
opacity: 0;
transition: all .5s ease;
color: #fff;
}
.alert.active {
opacity: 1
}
<input name="scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus />
<br />
<input class="custom-control-input" type="checkbox" id="111" />
<label for="111" class="custom-control-label">111</label>
<br />
<input class="custom-control-input" type="checkbox" id="222" />
<label for="222" class="custom-control-label">222</label>
<br />
<input class="custom-control-input" type="checkbox" id="333" />
<label for="333" class="custom-control-label">333</label>
<br />
<input class="custom-control-input" type="checkbox" id="444" />
<label for="444" class="custom-control-label">444</label>
<br />
<input class="custom-control-input" type="checkbox" id="555" />
<label for="555" class="custom-control-label">555</label>
<div class="alert">Not found</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I wouldn't use jQuery, but if you insist:
$(function(){
const scan = $('#Scan'), cci = $('.custom-control-input');
let scanVal;
scan.on('input', ()=>{
let scanVal = scan.val(), good;
cci.each((i, n)=>{
if(scanVal === $(n).val()){
n.checked = !n.checked; good = true;
}
});
if(good === undefined && scanVal.length > 2){
alert('Never use Alert');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="Scan" name="Scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus>
<br/>
<input class="custom-control-input" type="checkbox" id="111" value="111">
<label for="111" class="custom-control-label">111</label>
<br/>
<input class="custom-control-input" type="checkbox" id="222" value="222">
<label for="222" class="custom-control-label">222</label>
<br/>
<input class="custom-control-input" type="checkbox" id="333" value="333">
<label for="333" class="custom-control-label">333</label>
<br/>
<input class="custom-control-input" type="checkbox" id="444" value="444">
<label for="444" class="custom-control-label">444</label>
<br/>
<input class="custom-control-input" type="checkbox" id="555" value="555">
<label for="555" class="custom-control-label">555</label>
$('label').click(function() {
id = this.id.split('-');
if (id[0] === '1') {
id[0] = '2';
} else {
id[0] = '1';
}
$('#' + id[0] + '-' + id[1]).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">
<input type="radio" id="1-1" name="1-level">
<label for="1-1" id="1-1">1</label>
<input type="radio" id="1-2" name="1-level">
<label for="1-2" id="1-2">2</label>
</div>
<div class="two">
<input type="radio" id="2-1" name="2-level">
<label for="2-1" id="2-1">1</label>
<input type="radio" id="2-2" name="2-level">
<label for="2-2" id="2-2">2</label>
</div>
Is it possible to have one label for multiple inputs (radio)? So if I press the label (e. q. for="1"), two input fields get checked (input with id 1 in div class one and two)? Here is my example:
<div class="one">
<input type="radio" id="1" name="level">
<label for="1">1</label>
<input type="radio" id="2" name="level">
<label for="2">2</label>
</div>
<div class="two">
<input type="radio" id="1" name="level">
<label for="1">1</label>
<input type="radio" id="2" name="level">
<label for="2">2</label>
</div>
Quote from ducumentation:
https://www.w3.org/TR/html401/interact/forms.html#h-17.9.1
The LABEL element may be used to attach information to controls. Each
LABEL element is associated with exactly one form control.
So only way to do what you asked is by using JS
HTML:
Use data-input-group-id instead of id and data-for-input-group instead of for. Also you'll now be able to use "1" and "2" not "1-1" etc.
JS:
$('[data-for-input-group]').click(function() {
let inputGroupId = this.dataset.inputGroupId;
$('[data-input-group-id = "'+inputGroupId+'"]').prop('checked', true);
});
I have two checkbox and under this when tick one of two checkbox I have two another option checkbox and another tick there will be text. The text will be value from the checkbox, how can I get the value from this checkbox? But the text I want to put are different sentence for each option checkbox selected not the word from checkbox. Did anyone know?
And my another problem is the checkbox not working if I do not tick the first checkbox.
<script type="text/javascript">
function ShowHideDiv(Cat) {
var dvCat = document.getElementById("bigCat");
bigCat.style.display = Cat.checked ? "block" : "none";
}
</script>
<label for="Cat">
<input type="checkbox" id="Cat" onclick="ShowHideDiv(this)" /> Cat
</label>
<script type="text/javascript">
function ShowHideDiv2(Rabbit) {
var bigRabbit = document.getElementById("bigRabbit");
bigRabbit.style.display = Rabbit.checked ? "block" : "none";
}
</script>
<label for="Rabbit">
<input type="checkbox" id="Rabbit" onclick="ShowHideDiv2(this)" /> Rabbit
</label>
<div id="bigCat" style="display: none">
<label>
<input type="checkbox" id="bigSubCat" /> British shorthair
</label>
<label>
<input type="checkbox" id="bigSubCat" /> Exotic Shorthair
</label>
<div id="bigRabbit" style="display: none">
<label>
<input type="checkbox" id="bigSubRabbit" /> White Rabbit
</label>
<label>
<input type="checkbox" id="bigSubRabbit" /> Black Rabbit
</label>
Add value attribute to the checkbox. and set value to the checkbox.Or you can take the text from the label
<script type="text/javascript">
function ShowHideDiv(Cat) {
var dvCat = document.getElementById("bigCat");
bigCat.style.display = Cat.checked ? "block" : "none";
console.log(Cat.value)
console.log("Text Inside LABEL:" + Cat.parentNode.textContent )
}
</script>
<label for="Cat">
<input type="checkbox" id="Cat" onclick="ShowHideDiv(this)" value="cat"/> Cat
</label>
<script type="text/javascript">
function ShowHideDiv2(Rabbit) {
var bigRabbit = document.getElementById("bigRabbit");
bigRabbit.style.display = Rabbit.checked ? "block" : "none";
console.log(Rabbit.value)
console.log("Text Inside LABEL:" + Rabbit.parentNode.textContent )
}
</script>
<label for="Rabbit">
<input type="checkbox" id="Rabbit" onclick="ShowHideDiv2(this)" value="Rabbit"/> Rabbit
</label>
<div id="bigCat" style="display: none">
<label>
<input type="checkbox" id="bigSubCat" /> British shorthair
</label>
<label>
<input type="checkbox" id="bigSubCat" /> Exotic Shorthair
</label>
</div>
<div id="bigRabbit" style="display: none">
<label>
<input type="checkbox" id="bigSubRabbit" /> White Rabbit
</label>
<label>
<input type="checkbox" id="bigSubRabbit" /> Black Rabbit
</label>
I think you can follow this simple logic:
https://jsfiddle.net/pablodarde/6p7zkfwf/
HTML
<div class="container">
<div class="row">
<input type="checkbox" value="This is option one!" id="opt1"><label for="opt1">Option One</label>
<p></p>
</div>
<div class="row">
<input type="checkbox" value="This is option two!" id="opt2"><label for="opt2">Option Two</label>
<p></p>
</div>
</div>
JavaScript
const checkboxes = document.querySelectorAll('.container input[type=checkbox]');
for (let i = 0, l = checkboxes.length; i < l; i++) {
checkboxes[i].addEventListener('click', (e) => {
if(checkboxes[i].parentNode.querySelector('p').innerHTML == "") {
checkboxes[i].parentNode.querySelector('p').innerHTML = checkboxes[i].value;
} else {
checkboxes[i].parentNode.querySelector('p').innerHTML = "";
}
});
}
CSS
.row {
padding-bottom: 10px;
border-bottom: 1px solid black;
}
I have a form:
<form onsubmit="return send(this)">
<div>
<input type="radio" id="1" name="check" value="check1" checked="checked">
<input type="radio" id="2" name="check" value="check2">
<input type="radio" id="3" name="check" value="check3">
</div>
</form>
And js:
function send(formObj) {
myFirebase.push({
checked: formObj.check.value
})
}
How do I get the checked input value and pass it into the object key checked ?
var radiochecked = "";
for(i in formObj.check) {
if(formObj.check[i].checked) {
radiochecked = formObj.check[i].value;
}
}
function send(formObj) {
myFirebase.push({
checked: radiochecked
}
I coded a form that can post information to another page where it is processed. I wanted to ask users if there are options that were not selected. My form looks like this:
<form action="answers-of-brain-teaser-questions.php" method="post">
<div>
<div>Question 1</div>
<input name="q1" type="radio" value="1">A. 1
<br />
<input name="q1" type="radio" value="2">B. 4
<br />
<input name="q1" type="radio" value="3">C. 3
<br />
<input name="q1" type="radio" value="4">D. 2
</div>
<div>
<div id="question">Question 2</div>
<input name="q2" type="radio" value="5">A. 1
<br />
<input name="q2" type="radio" value="6">B. 2
<br />
<input name="q2" type="radio" value="7">C. 3
<br />
<input name="q2" type="radio" value="8">D. 4
</div>
</form>
How can I show users a message if some radio buttons are clicked. I only want to show a message if a question has no selected answer (no radio button is selected). For example, if no option is selected for question 2.
The easiest way to do this is with the built-in HTML5 attribute called required which tells the user that he has left a field (in our case the radio button).
An example how to use it:
<!DOCTYPE HTML>
<html>
<body>
<form id="exampleForm" action="#" method="get">
<input name="q1" type="radio" required="required" value="4">test<br />
<input name="q1" type="radio" required="required" value="4">test<br />
<input name="q1" type="radio" required="required" value="4">test<br />
<input name="sform" type="submit">
</form>
</body>
</html>
If you have no access to JQuery and want to support browsers not supporting required, you can use something like this:
var names = new Array("q1", "q2");
var notSelected = new Array();
var checked = "";
for(var i = 0; i < names.length; ++i) {
var current = getElementsByName(names[i]);
for(var j = 0; j < current.length; ++j) {
if(current[j].checked) {
checked = names[i];
}
}
if(names[i] !== checked)
notSelected.push(names[i]);
}
if(notSelected.length>0)
alert("You have to select the following radiogroups: "+notSelected.join(", "));
If you want to validate it via jquery it will go like-
//in script add jquery-min.js
function validate(){
if($("input[name=q2]:checked").length > 0) {
//Is Valid
}
}
<form action="answers-of-brain-teaser-questions.php" method="post" onsubmit="validate()">
<div>
<div>Question 1</div>
<input name="q1" type="radio" value="1">A. 1
<br />
<input name="q1" type="radio" value="2">B. 4
<br />
<input name="q1" type="radio" value="3">C. 3
<br />
<input name="q1" type="radio" value="4">D. 2
</div>
<div>
<div id="question">Question 2</div>
<input name="q2" type="radio" value="5">A. 1
<br />
<input name="q2" type="radio" value="6">B. 2
<br />
<input name="q2" type="radio" value="7">C. 3
<br />
<input name="q2" type="radio" value="8">D. 4
</div>
</form>
And if you want to do it in php page-
then check it via-
if(!isset($_POST['q2'})){
//your msg to user
}