I'm trying to use ternary to display checked if number are equal to i + 1 in react
<input className="inc" type="radio" id={ i } ({ number } === ({i}+1)) ? checked : ''}/>
but I get unexpected token on the first bracket of ({ number }
I'm doing this to get get <input className="inc" type="radio" id={ i } checked /> when is condition is true and <input className="inc" type="radio" id={ i } /> when false
You need to use the ternary as the value for the checked prop instead of trying to add/remove the prop:
<input className="inc" type="radio" id={i} checked={number === i+1}/>
Related
I am developing a React app with a checkbox. I would like to include a checkbox that sends true when checked and false when unchecked. my onChange is:
handleChange = (e) => {
this.setState({
[e.target.id]: e.target.value
})
}
And the input is:
<label>
<input type="checkbox" class="filled-in" value="true" id="My Value"
onChange={this.handleChange} />
<span>My Value</span>
</label>
My State has:
state = {
My Value = ''
}
When I submit with the checkbox checked, it works fine. The problem is when I check and uncheck, The value remains true instead of changing to false. How can I fix this. Please help.
Thanks.
Update handler to consume checked value from event
handleChange = e => {
this.setState({
[e.target.id]: e.target.checked
});
};
And don't hardcode checked value of input
<label>
<input
type="checkbox"
className="filled-in"
value={this.state['My Value']}
id="My Value"
onChange={this.handleChange}
/>
<span>My Value</span>
</label>
Change value="true" to value={this.state["My Value"]}
In my vue app I am wanting filter a list to show only entries that have been moderated.
What I am finding though is the when the checkbox is checked, I get all the results that are true, and when the checkbox is unchecked I get all the results are false, however what I am wanting is that when the checkbox is empty no filtering takes place, and when the checkbox is checked I get results that have been moderated.
here is my attempt,
<input type="checkbox" v-model="showUnModerated" /> Show only unmoderated listings</label>
My filter code,
return this.listing.listings.filter(listing => (this.showUnModerated ? 1 : 0) === listing.moderated);
You can add an array of modified list and v-model with your checkbox.Thus you can get the modified list.
new Vue({
el: '#app',
data: {
showChecked: []
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
<input type="checkbox" value='1' v-model="showChecked" /> element 1</label> <br>
<input type="checkbox" value='2' v-model="showChecked" /> element 2</label>
<br> {{showChecked}}
</div>
You can change the condition of filter to return all entries when the checkbox is empty(this.showUnModerated is false).
return this.listing.listings.filter(listing => (this.showUnModerated ? (1===listing.moderated) : true);
I need the output element of an html form to display content that is based off whatever item is checked from a radio button set. When I only need to display which value is checked it works fine, but when I try to use a function to switch the output, the if statement doesn't work - the function always returns 'Farenheit' as though option.value remains 'celcius' (regardless of how often the option buttons are swapped):
<script>
function switchOpt(opt){
if (opt='celcius'){
return 'Farenheit';
}else{
return 'Celcius';
}
}
</script>
<form oninput="swap.value=switchOpt(option.value)">
<input type="radio" name="option" value="celcius" checked /> Celcius <br />
<input type="radio" name="option" value="farenheit" /> Farenheit <br />
<output name="swap"></output>
</form>
The same setup for the if statement works in other functions, so I'm guessing the problem is that there's a datatype mismatch or something in how I'm trying to refer to the values here.
How do you refer to the checked value in a set of radio buttons within a function?
function switchOpt(opt) {
if (opt == 'farenheit') {
return 'Farenheit';
} else {
return 'Celcius';
}
}
<form oninput="swap.value=switchOpt(option.value)">
<input type="radio" name="option" value="celcius" checked /> Celcius <br />
<input type="radio" name="option" value="farenheit" /> Farenheit <br />
<output name="swap"></output>
</form>
Note the change in the if condition...
=== operator checks both value and type whereas == only compares the value. For example, 3 == '3' will return true even though one is a string and the other is a number and to avoid this should use ===. Therefore, I’d say it’s safer to use the former although I did use == here :)
Single = is for assigning. For example var x = document.getElementById(‘box’);
You should use === in your if clause instead of =.
In addition always add labels for your radio buttons and checkboxes.
<script>
function switchOpt(opt){
if (opt==='celcius'){
return 'Farenheit';
}else{
return 'Celcius';
}
}
</script>
<form oninput="swap.value=switchOpt(option.value)">
<input type="radio" name="option" id="celcius" value="celcius" checked /> <label for="celcius">Celcius</label> <br />
<input type="radio" name="option" id="farenheit" value="farenheit" /><label for="farenheit"> Farenheit</label> <br />
<output name="swap"></output>
</form>
I have a page that contains many checkboxes. There are a set of checkboxes that have an ID prefixed with pbfam_ and it is only these I am interested in.
When a user clicks on one of these, I need to get a list of the IDs from that subset of only the ones that are checked, and I need it to be a comma delimited string of the IDs.
The HTML looks like this:
<input type="checkbox" id="pdfam_711131" />
<label for="pdfam_711131" class="VIEWBOX">Temporary Staff</label>
<br />
<input type="checkbox" id="pdfam_711341" />
<label for="pdfam_711341" class="VIEWBOX">Other Contractors</label>
<br />
There are about 40 of these checkboxes. What I'm looking for is a string like:
"pdfam_711131, pdfam_711341"
I've tried various things and nothing has worked. I'm quite new to jQuery. This gives me a list of checked ones and returns the checked value in an alert and I was trying to mess around with this but I have got nowhere.
$('input:checkbox[id^="pdfam_"]:checked').each(function(){alert($(this).attr("id")););
A simple way is to use .map() to make an array of the IDs, then use .toArray().join(", ") to get your string.
var s = $('input:checkbox[id^="pdfam_"]:checked')
.map(function(i, el) { return el.id })
.toArray()
.join(", ");
console.log(s);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="checkbox" checked id="pdfam_711131" />
<label for="pdfam_711131" class="VIEWBOX">Temporary Staff</label>
<br />
<input type="checkbox" checked id="pdfam_711341" />
<label for="pdfam_711341" class="VIEWBOX">Other Contractors</label>
<br />
You can get all those are selected followed by Join.The get() method returns a specified element from a Map object.
console.log($('input:checkbox[id^="pdfam_"]:checked').map(function() {
return this.id || null;
}).get().join(','))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked id="pdfam_711131" />
<label for="pdfam_711131" class="VIEWBOX">Temporary Staff</label>
<br />
<input type="checkbox" checked id="pdfam_711341" />
<label for="pdfam_711341" class="VIEWBOX">Other Contractors</label>
<br />
I have a child component that receives props from a parent. In the child component it renders a couple radio buttons like this:
<div>
<div className="radio">
<label>
<input
type="radio"
name="value"
onChange={this._handleInputChange}
value="1"
checked={this.props.value === "1"}
/>
True
</label>
</div>
<div className="radio">
<label>
<input
type="radio"
name="value"
onChange={this._handleInputChange}
value="0"
checked={this.props.value === "0"}
/>
False
</label>
</div>
</div>
handleInputChange just calls a parent method like so:
_handleInputChange(e) {
this.props.handleChange(e);
}
that will set the state of the parent component to the value selected in the radio buttons (i.e. "1" or "0"). The issue im having is that the checked conditionals return the correct props, but they function strangely. It almost seems like when the radio input receives a new prop value, it doesn't re render with checked. When the component first renders, the props.value is an empty string. When a user selects a radio button it changes the state of the parent component with _handleInputChange and then sends that value back down for the conditionals.
Thanks to some of the help here and on IRC I figured out it was a preventDefault in my event handler. After removing that it worked perfectly!
You must use state for checked property if you want react re-render radio button.
Example:
<div>
<div className="radio">
<label>
<input
type="radio"
name="value"
onChange={this._handleInputChange}
value="1"
checked={this.state.radioButton1}
/>
True
</label>
</div>
<div className="radio">
<label>
<input
type="radio"
name="value"
onChange={this._handleInputChange}
value="0"
checked={this.state.radioButton2}
/>
False
</label>
</div>
</div>
You also set value for state like this (alternatively, you can initialize it with getInitialState):
this.setState({
radioButton1 : props.value ==="1",
radioButton2 :props.value ==="0"
});
And in _handleInputChange function you're able to know that radio button is checked or unchecked by checking it's state.
_handleInputChange(e) {
var isChecked = e.target.value ==="1" ? this.state.radioButton1 : this.state.radioButton2;
this.props.handleChange(e);
}
use bind method to bind context this._handleInputChange.bind(this) in the constructor,or use (e)=>this._handleInputChange(e) on click ,when the event handler executed normally has no context.
or declared as this below,it can bind this automatically:
class ButtonGroup extends Component{
....
_handleInputChange= (e)=>{
...
}
sample below:
class ButtonGroup extends Component {
render() {
return (
<div>
<div className="radio">
<label>
<input
type="radio"
name="value"
onChange={(e) => this._handleInputChange(e)}
value="1"
checked={this.props.value === "1"}
/>
True
</label>
</div>
<div className="radio">
<label>
<input
type="radio"
name="value"
onChange={(e) => this._handleInputChange(e)}
value="0"
checked={this.props.value === "0"}
/>
False
</label>
</div>
</div>
);
}
_handleInputChange(e) {
this.props.handleChange(e);
}
}
class Form extends Component {
constructor(props) {
super(props);
this.state = {value: '1'};
}
render() {
var value = this.state.value;
return <ButtonGroup value={value} handleChange={(e) => this.valueChanged(e)}/>
}
valueChanged(e) {
this.setState({value: e.target.value});
}
}
ReactDOM.render(
<Form />,
document.getElementById('container')
);