Looking for a way to change the CSS property by certain names.
Down below I have an example using checkboxes. There are two types that are generally the same unless changeSpecialCheckBox() occurs with a true value within its parameter.
file.css
.checkBoxApperance {
width: 100px;
height: 50px;
background: 'dark-blue';
}
file.html
<!--regularCheckBox-->
<div class="checkBoxApperance">
<input type="checkbox" id="regularCheckBox1" name="regularCheckBox"/>
</div>
<div class="checkBoxApperance">
<input type="checkbox" id="regularCheckBox2" name="regularCheckBox"/>
</div>
<div class="checkBoxApperance">
<input type="checkbox" id="regularCheckBox3" name="regularCheckBox"/>
</div>
<!--specialCheckBox-->
<div class="checkBoxApperance">
<input type="checkbox" id="specialCheckBox1" name="specialCheckBox"/>
</div>
<div class="checkBoxApperance">
<input type="checkbox" id="specialCheckBox2" name="specialCheckBox"/>
</div>
<div class="checkBoxApperance">
<input type="checkbox" id="specialCheckBox3" name="specialCheckBox"/>
</div>
file.js
function changeSpecialCheckBox(condition)
{
if(condition) {
document.getElementsByName("specialCheckBox").forEach(elem => {
elem.disabled = true;
$('.checkBoxApperance').css("background-color" , "light-blue"); //change the appearance
//of all checkboxes
//instead of all checkboxes under
//the "specialCheckBox" name
});
}
}
If you are using jQuery to set the style, then you can use $("[name='name']") to select the elements directly instead of combining jQuery with the vanilla JS getElementsByName(). This way you can chain the operations to only apply your changes to the relevant selection of elements, like this:
// You can run this inside the function/condition you want
$("[name='specialCheckBox']") // Selects the elements with the matching name
.prop("disabled", true) // Sets the disabled property
.closest(".checkBoxApperance") // Finds the parent div
.css("background-color", "lightblue") // Applies the new style to the parent
.checkBoxApperance {
width: 100px;
height: 50px;
background: darkblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--regularCheckBox-->
<div class="checkBoxApperance">
<input type="checkbox" id="regularCheckBox1" name="regularCheckBox" />
</div>
<div class="checkBoxApperance">
<input type="checkbox" id="regularCheckBox2" name="regularCheckBox" />
</div>
<div class="checkBoxApperance">
<input type="checkbox" id="regularCheckBox3" name="regularCheckBox" />
</div>
<!--specialCheckBox-->
<div class="checkBoxApperance">
<input type="checkbox" id="specialCheckBox1" name="specialCheckBox" />
</div>
<div class="checkBoxApperance">
<input type="checkbox" id="specialCheckBox2" name="specialCheckBox" />
</div>
<div class="checkBoxApperance">
<input type="checkbox" id="specialCheckBox3" name="specialCheckBox" />
</div>
In this case you can simply use Node.parentNode to target the parent element of the 'specialCheckBox' elements:
function changeSpecialCheckBox(condition) {
if (condition) {
document.getElementsByName('specialCheckBox').forEach(elem => {
elem.disabled = true;
elem.parentNode.style.background = 'lightblue'
})
}
}
changeSpecialCheckBox(1)
.checkBoxApperance {
width: 100px;
height: 30px;
background-color: darkblue;
}
<div class="checkBoxApperance">
<input type="checkbox" id="regularCheckBox1" name="regularCheckBox" />
</div>
<div class="checkBoxApperance">
<input type="checkbox" id="regularCheckBox2" name="regularCheckBox" />
</div>
<div class="checkBoxApperance">
<input type="checkbox" id="regularCheckBox3" name="regularCheckBox" />
</div>
<!--specialCheckBox-->
<div class="checkBoxApperance">
<input type="checkbox" id="specialCheckBox1" name="specialCheckBox" />
</div>
<div class="checkBoxApperance">
<input type="checkbox" id="specialCheckBox2" name="specialCheckBox" />
</div>
<div class="checkBoxApperance">
<input type="checkbox" id="specialCheckBox3" name="specialCheckBox" />
</div>
const checkBoxApperanceElemnts =
document.getElementsByClassName("checkBoxApperance");
for (var i = 0; i < checkBoxApperanceElemnts.length; i++) {
const root = checkBoxApperanceElemnts[i];
const el = root.querySelectorAll('[name="specialCheckBox"]');
if (el[0]) {
root.style.background = "red";
}
}
.checkBoxApperance {
width: 100px;
height: 50px;
background: 'dark-blue';
}
<html>
<bod>
<!--regularCheckBox-->
<div class="checkBoxApperance">
<input type="checkbox" id="regularCheckBox1" name="regularCheckBox" />
</div>
<div class="checkBoxApperance">
<input type="checkbox" id="regularCheckBox2" name="regularCheckBox" />
</div>
<div class="checkBoxApperance">
<input type="checkbox" id="regularCheckBox3" name="regularCheckBox" />
</div>
<div class="checkBoxApperance">
<input type="checkbox" id="specialCheckBox1" name="specialCheckBox" />
</div>
<div class="checkBoxApperance">
<input type="checkbox" id="specialCheckBox2" name="specialCheckBox" />
</div>
<div class="checkBoxApperance">
<input type="checkbox" id="specialCheckBox3" name="specialCheckBox" />
</div>
</body>
</html>
Related
So, I'm pretty new to react so I'm still not quite sure what I'm doing. I had a project that used purely HTML, JQuery, and CSS but I'm trying to convert it to react. I have a page with checkboxes and when they are clicked a div is added with links inside of it and if unchecked the div is removed:
if(element.checked != false) {
$('.links').append('<div id="social">\
<p>\
Instagram\n\
<button type="button" id="instagram" onclick="removeInstagram()">-</button>\
</p>\
<p>\
Facebook\n\
<button type="button" id="facebook" onclick="removeFacebook()">-</button>\
</p>\
<p>\
Twitter\n\
<button type="button" id="twitter" onclick="removeTwitter()">-</button>\
</p>\
<p>\
Youtube\n\
<button type="button" id="youtube" onclick="removeYoutube()">-</button>\
</p>\
</div>');
}
else if(element.checked != true) {
$("#social").remove();
}
I'm trying to turn this into React inside a component but I'm not sure if I'm doing it right. I have the function linked to my checkbox but I don't know how to add/remove the links when clicked:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { findDOMNode } from "react-dom";
import $ from "jquery";
export default class LoginPage extends Component {
render() {
return (
<div id="container">
<section className="presets">
<div>
<label for="item1">Social Media:</label>
<input
type="checkbox"
name="item1"
id="item1"
onChange={this.socialMedia.bind(this)}
/>
</div>
<div>
<label for="item2">Tech:</label>
<input
type="checkbox"
name="item2"
id="item2"
onChange="toggleTech(this)"
/>
</div>
<div>
<label for="item3">Sports:</label>
<input
type="checkbox"
name="item3"
id="item3"
onChange="toggleSports(this)"
/>
</div>
<div>
<label for="item4">News:</label>
<input
type="checkbox"
name="item4"
id="item4"
onChange="toggleNews(this)"
/>
</div>
<div>
<label for="item5">Games:</label>
<input
type="checkbox"
name="item5"
id="item5"
onChange="toggleGames(this)"
/>
</div>
<div>
<label for="item3">School:</label>
<input
type="checkbox"
name="item6"
id="item6"
onChange="toggleSchool(this)"
/>
</div>
<div>
<button
type="button"
id="custom"
onClick="customHandler(this)"
>
Add Custom Site
</button>
</div>
</section>
<section className="links"></section>
</div>
);
}
// Social(element) {
// if (element.checked != false) {
// $(".links").append(
// '<div id="social">\
// <p>\
// Instagram\n\
// <button type="button" id="instagram" onclick="removeInstagram()">-</button>\
// </p>\
// <p>\
// Facebook\n\
// <button type="button" id="facebook" onclick="removeFacebook()">-</button>\
// </p>\
// <p>\
// Twitter\n\
// <button type="button" id="twitter" onclick="removeTwitter()">-</button>\
// </p>\
// <p>\
// Youtube\n\
// <button type="button" id="youtube" onclick="removeYoutube()">-</button>\
// </p>\
// </div>'
// );
// } else if (element.checked != true) {
// $("#social").remove();
// }
// }
}
Any help with this would be appreciated, I am using the MERN stack for this.
Try this with func comp and useState
export const LoginPage = () => {
const [isChecked, setIsChecked] = useState(false);
return (
<div id="container">
<section className="presets">
<div>
<label for="item1">Social Media:</label>
<input
type="checkbox"
name="item1"
id="item1"
onChange={() => setIsChecked(!isChecked)}
/>
</div>
<div>
<label for="item2">Tech:</label>
<input
type="checkbox"
name="item2"
id="item2"
onChange="toggleTech(this)"
/>
</div>
<div>
<label for="item3">Sports:</label>
<input
type="checkbox"
name="item3"
id="item3"
onChange="toggleSports(this)"
/>
</div>
<div>
<label for="item4">News:</label>
<input
type="checkbox"
name="item4"
id="item4"
onChange="toggleNews(this)"
/>
</div>
<div>
<label for="item5">Games:</label>
<input
type="checkbox"
name="item5"
id="item5"
onChange="toggleGames(this)"
/>
</div>
<div>
<label for="item3">School:</label>
<input
type="checkbox"
name="item6"
id="item6"
onChange="toggleSchool(this)"
/>
</div>
<div>
<button
type="button"
id="custom"
onClick="customHandler(this)"
>
Add Custom Site
</button>
</div>
</section>
<section className="links">
{isChecked ? <div id="social">
<p>
Instagram
<button type="button" id="instagram" onclick="removeInstagram()">-</button>\
</p>
<p>
Facebook
<button type="button" id="facebook" onclick="removeFacebook()">-</button>\
</p>
<p>
Twitter
<button type="button" id="twitter" onclick="removeTwitter()">-</button>\
</p>
<p>
Youtube
<button type="button" id="youtube" onclick="removeYoutube()">-</button>\
</p>
</div> : null }
</section>
</div>
);
}
You should use state and ternary expression. should be something like this:
And you should not change the DOM with jquery while you are working with react.
import React, { Component } from "react";
export default class LoginPage extends Component {
constructor(){
super();
this.state ={
isElementChecked: false
}
}
render() {
return (
<div id="container">
<section className="presets">
<div>
<label for="item1">Social Media:</label>
<input
type="checkbox"
name="item1"
id="item1"
checked={this.state.isElementChecked}
onChange={this.setState({isElementChecked: !this.state.isElementChecked})}
/>
</div>
<div>
<label for="item2">Tech:</label>
<input
type="checkbox"
name="item2"
id="item2"
onChange="toggleTech(this)"
/>
</div>
<div>
<label for="item3">Sports:</label>
<input
type="checkbox"
name="item3"
id="item3"
onChange="toggleSports(this)"
/>
</div>
<div>
<label for="item4">News:</label>
<input
type="checkbox"
name="item4"
id="item4"
onChange="toggleNews(this)"
/>
</div>
<div>
<label for="item5">Games:</label>
<input
type="checkbox"
name="item5"
id="item5"
onChange="toggleGames(this)"
/>
</div>
<div>
<label for="item3">School:</label>
<input
type="checkbox"
name="item6"
id="item6"
onChange="toggleSchool(this)"
/>
</div>
<div>
<button
type="button"
id="custom"
onClick="customHandler(this)"
>
Add Custom Site
</button>
</div>
</section>
<section className="links">
{this.state.isElementChecked? <div id="social">
<p>
Instagram
<button type="button" id="instagram" onclick="removeInstagram()">-</button>\
</p>
<p>
Facebook
<button type="button" id="facebook" onclick="removeFacebook()">-</button>\
</p>
<p>
Twitter
<button type="button" id="twitter" onclick="removeTwitter()">-</button>\
</p>
<p>
Youtube
<button type="button" id="youtube" onclick="removeYoutube()">-</button>\
</p>
</div> : null}
</section>
</div>
);
}
}
What I would like to do is assign both the checked value and the click function to the radio input located inside the parent div.
I currently have this code but it only works for assigning the checked value. The click () function does not work:
<div id="contPosition">
<div class="contPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint3" />
</div>
</div>
</div>
</div>
<div id="contPrintPosition">
<div class="contPrintPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint3" />
</div>
</div>
</div>
</div>
<script>
jQuery('.contPosition').click(function () {
var val = $(this).find('input:radio').prop('checked')?false:true;
$(this).find('input:radio').prop('checked', val);
});
//THIS FUNCTION DOES NOT WORK AS EXPECTED
jQuery('.contPosition input').click(function(){
var curCls = $(this).attr('class');
$(`.contPrintPosition > input.${curCls}`).val("Test");
});
//THIS FUNCTION DOES NOT WORK AS EXPECTED
jQuery('.contPosition input[type=radio]').click(function(){
if (this.previous) {
this.checked = false;
}
this.previous = this.checked;
});
</script>
I dont know what you want to achieve exactly but only one click event could replace all the other event as below snippet :
$(function() {
//should be ".contPosition input[type=radio]"
$('.contPosition input[type=radio]').click(function(e) {
var curCls = $(this).attr('class');
$(`.contPrintPosition > input.${curCls}`).val("Test");
if (this.previous) {
this.checked = false;
}
this.previous = this.checked;
});
})
.contPrintPosition input::after {
content: attr(value);
width:100%;
margin-left:15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contPosition">
<div class="contPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint3" />
</div>
</div>
<div id="contPrintPosition">
<div class="contPrintPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint3" />
</div>
</div>
Good morning, I am trying to replace the options of each Select the check box to be able to give a better style and improve the functionality that it fulfills but when changing it for Check box it does not fulfill the function that it does with the option, The function that it fulfills is the Search for selected tags in each Select, It is for Blogger.
I am looking to get you to click on the selected checkbox in each Select. But I have not been successful, I hope you can help me, thank you very much!
<div class="tabs-outer">
<div class="tabs-cap-top cap-top">
<div class="cap-left"></div>
<div class="cap-right"></div>
</div>
<div class="fauxborder-left tabs-fauxborder-left">
<div class="fauxborder-right tabs-fauxborder-right"></div>
<div class="region-inner tabs-inner">
<div class="tabs section" id="crosscol">
<div class="widget HTML" id="HTML3">
<h2 class="title">Buscador Avanzado</h2>
<div class="widget-content">
<div id="multi-search">
<select class="cmbColumn" id="cmbColumn" name="cmbColumn[]" multiple>
<input type="Checkbox" name="cmbColumn[]" value="acción+" />1
<input type="Checkbox" name="cmbColumn[]" value="TV" /> TV
<input type="Checkbox" name="cmbColumn[]" value="TV" /> TV
<input type="Checkbox" name="cmbColumn[]" value="TV" /> TV
</select>
<select class="cmbSidebar" id="cmbSidebar" name="cmbSidebar[]" multiple>
<input type="checkbox" name="cmbSidebar[]" value="TV+" />1
<input type="checkbox" name="cmbSidebar[]" value="TV" /> TV
<input type="checkbox" name="cmbSidebar[]" value="TV" /> TV
<input type="checkbox" name="cmbSidebar[]" value="TV" /> TV
<input type="checkbox" name="cmbSidebar[]" value="TV" /> TV
</select>
<select class="cmbColor" id="cmbColor" name="cmbColor[]" multiple>
<input type="checkbox" name="cmbColor[]" value="TV" />1
<input type="checkbox" name="cmbColor[]" value="TV" /> TV
<input type="checkbox" name="cmbColor[]" value="TV" /> TV
</select>
<input class="filtro" onclick=" getValue() " value="Filtrar" type="button" />
</div>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=4472703516037708465&widgetType=HTML&widgetId=HTML3&action=editWidget§ionId=crosscol" onclick=" return _WidgetManager._PopupConfig(document.getElementById("HTML3")); " target="configHTML3" title="Edit">
<img alt="" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" height="18" width="18" />
</a>
</span>
</span>
<div class="clear"></div>
</div>
</div>
<div class="tabs section" id="crosscol-overflow"></div>
</div>
</div>
<div class="tabs-cap-bottom cap-bottom">
<div class="cap-left"></div>
<div class="cap-right"></div>
</div>
<script type="text/javascript">
function getValue() {
var valcmbColumn = document.getElementById("cmbColumn").value;
valcmbSidebar = document.getElementById("cmbSidebar").value;
valcmbColor = document.getElementById("cmbColor").value;
valOutput = (valcmbColumn + valcmbSidebar + valcmbColor);
window.open("/search/label/" + valOutput, "_self");
}
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == "block") {
e.style.display = "none";
} else {
e.style.display = "block";
}
}
</script></div>
As mentioned by Scott Marcus, you would have to make your own drop down component to add checkmarks to a sort of select.
Something like this:
Just make the span element look like a select option and make it clickable instead of on hover if you so desire.
You could also style the selections div to your own liking.
.selections{
transform:scaleY(0);
transition: all 0.5s;
transform-origin:top;
height:0;
}
.selector{
cursor:pointer;
}
.selector:hover .selections{
transform:scaleY(1);
height:auto;
border: 1px solid red;
width:200px;
margin-top:5px;
}
<div class="selector"><span style="border:1px solid red">Hover me and style me as select</span>
<div id="selections" class="selections">
<input type="checkbox" value="Something" /> Something <br />
<input type="checkbox" value="Something" /> Something <br />
<input type="checkbox" value="Something" /> Something <br />
<input type="checkbox" value="Something" /> Something <br />
<input type="checkbox" value="Something" /> Something <br />
</div>
</div>
I have script which is creating number of new inputs according to inserted value to input.
New inputs are extended with another script but this script is not working.
This script is working when appended html code is not in js but in index.html. Then this script works fine but the first script is not launched.
CODE:
$(function () {
$(".main-input1").on("change", function () {
$(".activityType1.active").removeClass("active");
var subList = $(".activityType1." + $(this).val());
if (subList.length) {
subList.addClass("active");
}
});
});
const button = document.querySelector('button');
const input = document.getElementById('NumberOfNights');
const wrapper = document.querySelector('div.wrapper-activity');
function generateItems(numOfItems) {
let html = "";
wrapper.innerHTML = "";
for(i = 1; i <= numOfItems; i++) {
html += `
<style>
.activityType1 {
display: none;
}
.activityType1.active {
display: inline-block;
}
</style>
<section class="activity-wrapper">
<label for="activity">Activity ${i}</label>
<div class="select-style">
<select id="activity" style="width: 300px;" name="activity" class='main-input1'>
<option value='none' disabled selected>--</option>
<option value='Hiking'>Hiking</option>
<option value='Biking'>Biking</option>
<option value='Tasting'>Tasting</option>
</select>
</div>
</section>
<section class='activityType1 Hiking activity-wrapper'>
<div class="bottom-row">
<label class="hiking-activity">
<input type="radio" name="hiking-activity" value="National park Pieniny">
<img src="../assets/img/3.jpg">
</label>
<label class="hiking-activity">
<input type="radio" name="hiking-activity" value="National park Slovak paradise">
<img src="../assets/img/4.jpg">
</label>
</div>
</section>
<section class='activityType1 Biking activity-wrapper'>
<div class="top-row">
<label class="biking-activity">
<input type="radio" name="biking-activity" value="National park High Tatras">
<img src="../assets/img/5.jpg">
</label>
<label class="biking-activity">
<input type="radio" name="biking-activity" value="National park Pieniny">
<img src="../assets/img/6.jpg">
</label>
</div>
</section>
<section class='activityType1 Tasting activity-wrapper'>
<div class="top-row">
<label class="tasting-activity">
<input type="radio" name="tasting-activity" value="Beer tasting">
<img src="../assets/img/10.jpg">
</label>
<label class="tasting-activity">
<input type="radio" name="tasting-activity" value="Whisky tour">
<img src="../assets/img/11.jpg">
</label>
</div>
<div class="bottom-row">
<label class="tasting-activity">
<input type="radio" name="tasting-activity" value="Tokaj wine tour">
<img src="../assets/img/12.jpg">
</label>
</div>
</section>
`;
};
return html;
};
button.addEventListener('click',() => {
const n = parseInt(input.value);
if (n) {
wrapper.innerHTML = generateItems(n);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="NumberOfNights" placeholder="--" type="number" name="nights" max="5">
<button type="button">Continue</button>
<div class="wrapper-activity"></div>
Change it to $(document).on('change', '.main-input1', function () { this way your first script can be launched on the appended code.
$(function () {
$(document).on('change', '.main-input1', function () {
$(".activityType1.active").removeClass("active");
var subList = $(".activityType1." + $(this).val());
if (subList.length) {
subList.addClass("active");
}
});
});
const button = document.querySelector('button');
const input = document.getElementById('NumberOfNights');
const wrapper = document.querySelector('div.wrapper-activity');
function generateItems(numOfItems) {
let html = "";
wrapper.innerHTML = "";
for(i = 1; i <= numOfItems; i++) {
html += `
<style>
.activityType1 {
display: none;
}
.activityType1.active {
display: inline-block;
}
</style>
<section class="activity-wrapper">
<label for="activity">Activity ${i}</label>
<div class="select-style">
<select id="activity" style="width: 300px;" name="activity" class='main-input1'>
<option value='none' disabled selected>--</option>
<option value='Hiking'>Hiking</option>
<option value='Biking'>Biking</option>
<option value='Tasting'>Tasting</option>
</select>
</div>
</section>
<section class='activityType1 Hiking activity-wrapper'>
<div class="bottom-row">
<label class="hiking-activity">
<input type="radio" name="hiking-activity" value="National park Pieniny">
<img src="../assets/img/3.jpg">
</label>
<label class="hiking-activity">
<input type="radio" name="hiking-activity" value="National park Slovak paradise">
<img src="../assets/img/4.jpg">
</label>
</div>
</section>
<section class='activityType1 Biking activity-wrapper'>
<div class="top-row">
<label class="biking-activity">
<input type="radio" name="biking-activity" value="National park High Tatras">
<img src="../assets/img/5.jpg">
</label>
<label class="biking-activity">
<input type="radio" name="biking-activity" value="National park Pieniny">
<img src="../assets/img/6.jpg">
</label>
</div>
</section>
<section class='activityType1 Tasting activity-wrapper'>
<div class="top-row">
<label class="tasting-activity">
<input type="radio" name="tasting-activity" value="Beer tasting">
<img src="../assets/img/10.jpg">
</label>
<label class="tasting-activity">
<input type="radio" name="tasting-activity" value="Whisky tour">
<img src="../assets/img/11.jpg">
</label>
</div>
<div class="bottom-row">
<label class="tasting-activity">
<input type="radio" name="tasting-activity" value="Tokaj wine tour">
<img src="../assets/img/12.jpg">
</label>
</div>
</section>
`;
};
return html;
};
button.addEventListener('click',() => {
const n = parseInt(input.value);
if (n) {
wrapper.innerHTML = generateItems(n);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="NumberOfNights" placeholder="--" type="number" name="nights" max="5">
<button type="button">Continue</button>
<div class="wrapper-activity"></div>
I'm accessing the data for the CheckBoxes from the database, now I want to display the form for each and every checkbox if it's checked. How to achieve this?
My form design -
<div class="col-sm-12" id="roomtypes">
#foreach(var item in ViewBag.RoomTypes)
{
<input type="checkbox" id="chk_#item.id" name="RoomTypes" value="#item.id" /> #item.type<br />
<div class="col-sm-12" style="display:none;" id="Price_#item.id">
<input type="number" placeholder="Enter Price" id="PriceValue" />
</div>
}
</div>
I want to display the price input when checkbox is checked.
My back-end code -
ViewBag.RoomTypes = db.RoomTypes.ToList();
My code's generating this output -
My code's generating this output
You can easily do that with css. Add chkshowhide css class to your input and div and add css as per code. Your code will be as below.
<div class="col-sm-12" id="roomtypes">
#foreach(var item in ViewBag.RoomTypes)
{
<input type="checkbox" id="chk_#item.id" name="RoomTypes" value="#item.id" class="chkshowhide"/> #item.type<br />
<div class="col-sm-12 chkshowhide" id="Price_#item.id">
<input type="number" placeholder="Enter Price" id="PriceValue" />
</div>
}
</div>
css.
div.chkshowhide {
display: none;
}
input.chkshowhide:checked + br + div.chkshowhide {
display: block;
}
You can test sample here.
function saveData() {
$('input.chkshowhide:checked').each(function() {
var chkValue = $(this).val();
var divId = this.id.replace("chk", "Price");
var priceValue = $('#' + divId).find('input').val();
console.log('chkValue=' + chkValue + ", priceValue=" + priceValue);
// Write your save code here
});
}
div.chkshowhide {
display: none;
}
input.chkshowhide:checked + br + div.chkshowhide {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input type="checkbox" id="chk_1" name="RoomTypes" value="1" class="chkshowhide"> 1<br />
<div class="col-sm-12 chkshowhide" id="Price_1">
<input type="number" placeholder="Enter Price" id="PriceValue" />
</div>
<input type="checkbox" id="chk_2" name="RoomTypes" value="2" class="chkshowhide"> 2<br />
<div class="col-sm-12 chkshowhide" id="Price_2">
<input type="number" placeholder="Enter Price" id="PriceValue" />
</div>
<input type="checkbox" id="chk_3" name="RoomTypes" value="3" class="chkshowhide"> 3<br />
<div class="col-sm-12 chkshowhide" id="Price_3">
<input type="number" placeholder="Enter Price" id="PriceValue" />
</div>
<input type="button" value="Save" onclick="saveData();" />