dear i have 2 text and 2 checkbox:
<input type="checkbox" id="class1">
<input type="checkbox" id="class2">
<div id="hidden">
<input type="text" id="valclass1">
<input type="text" id="valclass2">
</div>
i want if i checked at "class1" then click show button "valclass1" can show. but if not checked, it hidden.how do i do that?
I would do it like this:
<script type="javascript/text" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="javascript/text">
$(function()
{
$('#ShowButton').click(function()
{
if($('#class1').is(':checked')) $('#valclass1').show();
if($('#class2').is(':checked')) $('#valclass2').show();
});
});
</script>
<input type="checkbox" id="class1">
<input type="checkbox" id="class2">
<input type="button" id="ShowButton" />
<input type="text" id="valclass1" style="display: none">
<input type="text" id="valclass2" style="display: none">
It would work, but probably doesn't answer your question. You need to learn more about JavaScript to be able to roll your own solution.
Check out W3C's JavaScript tutorial
Related
I'm trying to figure out how to only allow one of two radio buttons to be checked in a form where the two radio buttons don't share the same name. I've been experimenting for hours now, but can't figure it out. Here is what I have currently:
$("#theForm").click(function(){
//alert('You clicked radio!');
if($('input:radio:checked')){
$('input:radio:checked').prop("checked", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="theForm">
<form class="type">
<input type="radio" id="topic" name="topic" value="on" checked>
<input type="radio" id="all" name="all" value="on">
</form>
</div>
Here's a Fiddle: https://jsfiddle.net/Codewalker/reh0mzs3/1/
the click function will give you an event. you can target the event.target.name to see which radio button was clicked on and then do a simple if statement to uncheck the other radio button
$("#theForm").click(function(){
if(event.target.name == 'topic'){
$('#all').prop("checked", false);
}else{
$('#topic').prop("checked", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="theForm">
<form class="type">
<input type="radio" id="topic" name="topic" value="on" checked>
<input type="radio" id="all" name="all" value="on">
</form>
</div>
This should work:
<div> <input type="radio" id="contactChoice1" name="contact" value="email">
<label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2" name="contact" value="phone">
<label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3" name="contact" value="message">
<label for="contactChoice3">Message</label> </div>
I would like to make sure subjects answer my radio button question on my online survey in order to be able to go to the next page. If they don't answer, I would like to have a pop up message that says "Please answer the question."
This is the code I have, and where I would like to put the requirement:
<div class="page" id="6" style="display: none;">
<div class="cell">
<div align="center">
<h1>Do you hear a speech disfluency?</h1></div>
<br />
<audio src="sw2368_so_we-ve_got_you_know_we-ve_got.mp3" type="audio/mp3" preload="auto" controls="controls" oncontextmenu="return false;">Audio could not be loaded.</audio>
<br />
<div class="radio">
<label>
<input name="Q1Answer" type="radio" value="Y" />Yes</label>
</div>
<br />
<div class="radio">
<label>
<input name="Q1Answer" type="radio" value="N" />No</label>
</div>
<br />
</fieldset>
<input type="button" value="Continue" onclick="next();" />
</div>
</div>
Thank you!
Alternative 1. You can have one of them defaultly checked when page is opened by adding checked so it'll be like this:
<div class="radio">
<label><input name="Q1Answer" type="radio" value="Y" checked/>Yes</label>
</div>
Or ...
Alternative 2. Add this line in the first line of next() function:
If you use jQuery:
if (!$('input[name=Q1Answer]:checked').length) return;
It'll prevent next() function to continue executing when there's no radio button checked.
UPDATE:
Sorry I forgot that you want to popup a message. So just add this:
if (!$('input[name=Q1Answer]:checked').length) {
alert("Please answer the question.");
return;
}
UPDATE 2:
If you don't use jQuery, this is the pure javascript solution:
Just need to change the if condition to this:
if (!document.querySelectorAll('input[name=Q1Answer]:checked').length) {
alert("Please answer the question.");
return;
}
You just need to set the required-attribute for one input of the radiogroup, but you can set it for all.
For example:
<form>
<label for="input1">1:</label>
<input type="radio" name="myradiogroup1" id="input1" value="1" required><br>
<label for="input2">2:</label>
<input type="radio" name="myradiogroup1" id="input2" value="2"><br>
<label for="input3">3:</label>
<input type="radio" name="myradiogroup1" id="input3" value="3"><br>
<input type="submit" value="send">
</form>
for this jsfiddle - http://jsfiddle.net/Ja3Fx/1/ $('div').trigger('create') doesn't
work as required.
it does style radio button but it isn't quite right ... any ideas ?
<div id="testPage" data-role="page">
<div data-role="content">
<fieldset data-role="controlgroup">
<legend>Radio buttons, vertical controlgroup:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked">
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2">
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3">
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4">
<label for="radio-choice-4">Lizard</label>
</fieldset>
<a id="add-animal" href="#" data-role="button" data-position-to="window">Add Animal</a>
</div>
</div>
$('#add-animal').click(function() {
var fldset = $('fieldset');
$(fldset).append($('<input type="radio" name="radio-choice-1" id="radio-choice-5" value="choice-5"><label for="radio-choice-5">Bat</label>'));
$("input").checkboxradio();
$('div ').trigger('create ');
});
I am using the following code to make a panel. You can try similar code.
$(document).on('pagecreate', '[data-role="page"]', function(){
$('<div>').attr({'id':'mypanel','data-role':'panel'}).appendTo($(this));
$(document).on('click', '#open-panel', function(){
$.mobile.activePage.find('#mypanel').panel("open");
});
});
There are two separate divs: check_one & check_two.
check_one has 4 boxes in it, check_two has 1.
If you check the checkbox within the check_two div, it should uncheck all chekced boxes within the first div, check_one. That's sort of confusing, but that is what I'm attempting to do.
HTML ::
<div id="check_one">
<label>Stuff 1</label> <input name="" type="checkbox" value="" id="group1" checked="checked"><br>
<label>Stuff 2</label> <input name="" type="checkbox" value="" id="group1" checked="checked"><br>
<label>Stuff 3</label> <input name="" type="checkbox" value="" id="group1" checked="checked"><br>
<label>Stuff 4</label> <input name="" type="checkbox" value="" id="group1" checked="checked">
</div>
<br>
<div id="check_two">
<label>Undo</label> <input name="uncheckMe" type="checkbox" value="" id="group2">
</div>
jQuery ::
$('input[name=uncheckMe]').change(
{
var checked = $("#group1").attr("checked");
if(checked)
{
$("#check_two").attr("disabled", true);
}
});
I created a jsFiddle for this http://jsfiddle.net/Twisty/ta2qT/
You're missing a Function within Change():
$('input[name=uncheckMe]').change(function(){
$("#check_one > input").each(function(i) {
if ($(this).is(":checked")) {
$(this).removeAttr("checked");
}
});
});
Try this:
$("input[name='uncheckMe']").change(function(){
if ($(this).is(":checked")){
$("#check_one input").removeAttr("checked");
}
});
And a jsFiddle: http://jsfiddle.net/PgHbu/3/
How would i place a long list of checkbox options around a scrolling windows so that it does not take up large amounts of the page in my php webpage?
thanks.
Something like this should work.
HTML:
<div class="scrollbox">
<input type="checkbox" />
...
</div>
CSS:
.scrollbox {
height:200px;
overflow-x:scroll;
}
<div style="overflow:scroll; height: 400px">
<!-- put your content here -->
</div>
Havent tested it, it should be AROUND those lines. Done that before for a UI framework of mine, had a checkbox list and radiolist UI control and used that technique...
<html>
<head>
<title>Scrolling Checkboxes</title>
<script type="text/javascript">
</script>
</head>
<body>
<div id="ScrollCB" style="height:150;width:200px;overflow:auto">
<input type="checkbox" id="scb1" name="scb1" value="1">As Seen On Tv<br>
<input type="checkbox" id="scb2" name="scb2" value="2">Back To Basics<<br>
<input type="checkbox" id="scb3" name="scb3" value="3">Bed Bath & Beyond<br>
<input type="checkbox" id="scb4" name="scb4" value="4">Black and Decker<br>
<input type="checkbox" id="scb5" name="scb5" value="5">Borch<br>
<input type="checkbox" id="scb6" name="scb6" value="6">Culsinart<br>
<input type="checkbox" id="scb7" name="scb7" value="7">Dualit Lite<br>
<input type="checkbox" id="scb8" name="scb8" value="8">"Easton<br>
<input type="checkbox" id="scb9" name="scb9" value="9">Euro Cuisine<br>
<input type="checkbox" id="scb10" name="scb10" value="10">Euro-Pro<br>
<input type="checkbox" id="scb11" name="scb11" value="11">Farberware<br>
<input type="checkbox" id="scb12" name="scb12" value="12">Gator<br>
<input type="checkbox" id="scb13" name="scb13" value="13">Hamilton Beach<br>
<input type="checkbox" id="scb14" name="scb14" value="14">Hansgrohe<br>
<input type="checkbox" id="scb15" name="scb15" value="15">International Playthings<br>
<input type="checkbox" id="scb16" name="scb16" value="16">Kitchen Aid<br>
</div>
</body>
</html>