This is a MVC 3 application that uses the razor view engine. I have the following line of code in a view that displays 2 checkboxes. When one is checked the other checkbox should uncheck. I have searched around and between my lack of exp with javascript and the lack of threads found on google related to this i am at a lost for even a code snip of javascript to use for a worthwhile starting point. Any ideas?? This below is what I have coded up on my own but am more stuck than anything with this.
$("#isStaffCheckBox").change(
function (e) {
var checked = $(this).attr('checked');
if(checked)
{
<li>Staff Member: #Html.CheckBoxFor(Function(f) f.isStaff, New With {.id = "isStaffCheckBox"}) Board Member: #Html.CheckBoxFor(Function(f) f.boardMember, New With {.id = "isBoardCheckBox"})</li>
Any help is greatly appreciated..
If there is some reason for this to be a checkbox instead of a radio button then the following code should do it.
$("#isStaffCheckBox").change(
function (e) {
$("#isBoardCheckBox").prop('checked',!this.checked);
}
});
Change the property "("#isBoardCheckBox").prop" to "("#isBoardCheckBox").attr".
Works fine!
$("#isStaffCheckBox").change(
function (e) {
$("#isBoardCheckBox").attr("checked", !this.checked);
})
// If you use jquery version 1.6.4 or below use "attr", if you use higher versions (1.9 or above) use "prop" instead of attr.
Code:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Checkbox</title>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(":checkbox").change(function () {
$("input:checkbox").attr("checked", false);
$(this).attr("checked", "checked");
});
});
</script>
</head>
<body>
<input type="checkbox" id="chk1" value="1" /> Staff Member <br/>
<input type ="checkbox" id="chk2" value="2" /> Board Member
</body>
</html>
Please have a look on this link JsFiddle my code
Related
I am trying to implement a show/hide button in ASP.NET, and through some research I have discovered that using AJAX could be my best bet. I have been trying to understand AJAX, but I am clearly doing something wrong as the code does nothing.
I am trying to put this code in the body of my code, it is essentially the same code as that found on https://www.c-sharpcorner.com/blogs/show-and-hide-password-using-jquery-in-asp-net
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("<%=showP.ClientID %>").hover(function show() {
//Change the attribute to text
$("<%=txtPassword.ClientID %>").attr('type', 'text');
$("<%=showP.ClientID %>").removeClass('eyeOpen').addClass('eyeClosed');
},
function () {
//Change the attribute back to password
$("<%=txtPassword.ClientID %>").attr('type', 'password');
$("<%=showP.ClientID %>").removeClass('eyeClosed').addClass('eyeOpen');
});
//CheckBox Show Password
$("<%=showP.ClientID %>").click(function () {
$("<%=txtPassword.ClientID %>").attr('type', $(this).is(':checked') ? 'text' : 'password');
});
});
</script>
Do I need to implement the AJAX CSS files for the script to function? The link above makes use of them, but I did not implement any of the styles myself, so I figured I could leave out a link to the stylesheets like this below:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
I really do not have any of knowledge of AJAX, so any help would be greatly appreciated :)
for the working demo, I used the HTML element you can do the same with the Asp.Net element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h3>Enter password</h3>
<input id="txtPass" class="test" type="password"></input>
<br />
<br />
show <input type="checkbox" name="mycheckbox" id="ckShowPass" onclick="myshowp(this)"/>
<script>
function myshowp(e) {
txtBox = $('#txtPass')
if (e.checked) {
txtBox.attr("Type", "Text");
}
else {
txtBox.attr("Type", "Password");
}
}
</script>
Well, no, you don't need anything really special here. jQuery DOES help, and you can do it this way:
<h3>Enter password</h3>
<asp:TextBox ID="txtPass" runat="server" TextMode="Password" ClientIDMode="Static"></asp:TextBox>
<br />
<br />
<asp:CheckBox ID="ckShowPass" runat="server" Text="Show password" onclick="myshowp()" />
<script>
function myshowp() {
ckbox = $('#ckShowPass')
txtBox = $('#txtPass')
if (ckbox.is(':checked')) {
txtBox.attr("Type", "Text");
}
else {
txtBox.attr("Type", "Password");
}
}
</script>
Output:
And if we check the box show password, then we get:
So, the above DOES use jQuery, and that is useally installed for you.
You can also use pure JavaScript, but the Text mode is read only, and thus you have to make a copy of the control - which is painful.
<input class="bx--toggle" id="toggle-view" type="checkbox" ng-model="vm.monthView" ng-change="vm.getRelevantData()"
ng-attr-data-modal-target="{{vm.alertForSaveAll ? '#add-save-all-alert-modal': 'undefined'}}">
i have following Html my default vm.monthView is true i need to pass true or false with the check box of this type being checked or unchecked....and need to pass same to the function.
If I understand you question correctly, you are trying to get the controller to receive true if the checkbox is checked, and false if not.
If you look in angular's documentation for input[type=checkbox] you will see a very simple example that does exactly that.
I am copying the relevant part here.
<input type="checkbox" ng-model="checkboxModel.value2"
ng-true-value="'YES'" ng-false-value="'NO'">
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
</head>
<body data-ng-app="role" data-ng-controller="fooController">
<input class="bx--toggle" id="toggle-view" type="checkbox" ng-model="monthView" ng-change="getRelevantData(monthView)"></select>
</body>
</head>
<script>
var app = angular.module('role', []);
app.controller('fooController', function($scope){
$scope.getRelevantData = function(monthView){
alert(monthView)
}
});
</script>
OK, sure this is really simple, but I'm new to Java / jQuery so all help knowledge is greatly appreciated!
I have three sets of information, but i want each set to behave the same way, when I check a box, I want a certain div to appear, then disappear when the checkbox is unchecked...
Started with this, and it works...
//Set 1 #mod_1 toggles #sec_mod_1..
$('#sec_mod_1').change(function() {
$('#mod_1').toggle(this.checked);
}).change();
//Set 2
$('#sec_mod_2').change(function() {
$('#mod_2').toggle(this.checked);
}).change();
//Set 3
$('#sec_mod_3').change(function() {
$('#mod_3').toggle(this.checked);
}).change();
Now this is a little long winded, and I know there has to be a shorter way... Thinking something like this...
$('[id^="sec_mod_"]').change(function() {
$('[id^="mod_"]').toggle(this.checked);
}).change();
However, I don't know how to make this function for each separate set, was thinking the "this" keyword...?
Like I said all help would be greatly appreciated...
Use a simple class selector:
$('.trigger').change(function() {
var $checkbox = $(this);
var id = $checkbox.attr('id'); // eg. sec_mod_1
var numb = id.substring(id.lastIndexOf('_') + 1); // eg. 1
$('#mod_' + numb).toggle(this.checked); // toggle #mod_1
}).change();
Add trigger as the class to the elements that needs this functionality.
Working jsfiddle
You may use:
$('#mode_' + this.id.replace('sec_mod_', ''), this).toggle(this.checked);
You can use use the same markup with a handler like
$('input[id^="sec_mod_"]').change(function() {
console.log('d')
$('#mode_' + this.id.replace('sec_mod_', '')).toggle(this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="sec_mod_1" type="checkbox" />
<div id="mode_1">1</div>
<input id="sec_mod_2" type="checkbox" />
<div id="mode_2">2</div>
<input id="sec_mod_3" type="checkbox" />
<div id="mode_3">3</div>
Or if you can change the markup
$('.sec_mod').change(function() {
$($(this).data('target')).toggle(this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="sec_mod_1" class="sec_mod" type="checkbox" data-target="#mode_1" />
<div id="mode_1">1</div>
<input id="sec_mod_2" class="sec_mod" type="checkbox" data-target="#mode_2" />
<div id="mode_2">2</div>
<input id="sec_mod_3" class="sec_mod" type="checkbox" data-target="#mode_3" />
<div id="mode_3">3</div>
I want click able buttons instead of radio buttons. I saw an example on jsfiddle but only problem is I don't have labels tags in my code. I don't have access to code, so I cant add them either. I can only add javascript and css to my CMS. Is there any way to achieve results?
<div class="button1">
<input type="radio" checked="" value="1" name="question">question 1
</div>
<div class="button2">
<input type="radio" value="2" name="question">question 2
</div>
I got solution here but its not working in IE.
$(function() {
$('.container input[type="radio"]').each(function(index) {
console.log($(this));
$(this).attr('id', 'radio' + index);
var label = $('<label />', {'for': 'radio' + index}).html($(this).parent().html());
$(this).parent().empty().append(label);
});
$('label').click(function () {
$('label').removeClass('selected');
$(this).addClass('selected');
});
});
To get this functionality, you have to wrap your inputs (and the description) in a label. Assuming that your radio is always in a seperate container, this is possible with this piece of code:
$('.container input[type="radio"]').each(function(index) {
console.log($(this));
$(this).attr('id', 'radio' + index);
var label = $('<label />', {'for': 'radio' + index}).html($(this).parent().html());
$(this).parent().empty().append(label);
});
working jsfiddle: http://jsfiddle.net/VyvpP/
If, what I think you're asking is that you have a radio button in the guise of a clickable button, this should do you:
-webkit-appearance:none
http://jsfiddle.net/54ek6/
You can hide the radio button with -webkit-appearance:none; and using :before psuedo classes, add in the labels.
This does not work on IE. (Just so you know!)
if you want something like this:
just copy and paste:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#rad").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<input type="radio" checked="" value="1" name="question" id="rad">
</body>
</html>
Just working on some small pages to be elements of a much larger project and am completely confused at my current problem here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<STYLE TYPE="text/css">
.questionBlock { font-size: x-large; color: red }
</STYLE>
<script type="text/javascript">
$(document).ready(function() {
alert("sdsd")
$("input[#name='questionType']").change(function(){
alert("dfdfdf");
var selected = $("form input:radio:checked").val();
alert(selected);
})
});
</script>
<form action="">
<input type="radio" name="questionType" value="closed" /> Closed Endeded<br />
<input type="radio" name="questionType" value="matrix" /> Matrix Question<br />
<input type="radio" name="questionType" value="open" /> Open Ended
</form>
<div class="questionBlock" id="closed">lol</div>
<div class="questionBlock" id="open">rol</div>
<div class="questionBlock" id="matrix">bol</div>
But the change event never fires, regardless of browser, I've tried using bind as well but it's driving me up the wall!
jQuery attribute selectors don't need # prefix (like XPath). Change your code like this:
$("input[name='questionType']").change(function(){
Here is a working version.
you need to remove the # fiddle
$(document).ready(function() {
$('input[name="questionType"]').change(function(){
alert("dfdfdf");
var selected = $("form input:radio:checked").val();
alert(selected);
})
});
jQuery does not use "#" in Xpath-style attr selectors anymore. This being the case, your selector does not match anything.