Write jquery scripts dynamic
0
I need to write scripts in jQuery for checkbox's event's dynamically, this is my html code:
<fieldset>
<label>
<input type="checkbox" name="radio0" id="radio0">
<img id="img0" src="web_bg.jpg" width="200" height="200"/>
</label>
<label>
<input type="checkbox" name="radio1" id="radio1">
<img id="img1" src="web_bg.jpg" width="200" height="200"/>
</label>
<label>
<input type="checkbox" name="radio2" id="radio2">
<img id="img2" src="web_bg.jpg" width="200" height="200"/>
</label>
<label id="label">3</label>
</fieldset>
and this is my jQuery script that works:
$('#radio0').click(function() {
if ($(this).is(':checked')) {
$('#img0').css("opacity", "0.5");
} else {
$('#img0').css("opacity", "1");
}
});
$('#radio1').click(function() {
if ($(this).is(':checked')) {
$('#img1').css("opacity", "0.5");
} else {
$('#img1').css("opacity", "1");
}
});
$('#radio2').click(function() {
if ($(this).is(':checked')) {
$('#img2').css("opacity", "0.5");
} else {
$('#img2').css("opacity", "1");
}
});
but i want to put this code in a buckle like this (but this doesn't works):
var text = $('#label').text();
var max = parseInt(text);
for (var i = 0; i < 3; i++) {
$('#radio' + i + '').click(function() {
if ($(this).is(':checked')) {
$('#img' + i + '').css("opacity", "0.5");
} else {
$('#img' + i + '').css("opacity", "1");
}
});
jquery checkbox
edited Nov 26 '18 at 14:24
j08691
166k20192213
asked Nov 26 '18 at 13:56
AjolotzinguiAjolotzingui
81
add a comment |
0
I need to write scripts in jQuery for checkbox's event's dynamically, this is my html code:
<fieldset>
<label>
<input type="checkbox" name="radio0" id="radio0">
<img id="img0" src="web_bg.jpg" width="200" height="200"/>
</label>
<label>
<input type="checkbox" name="radio1" id="radio1">
<img id="img1" src="web_bg.jpg" width="200" height="200"/>
</label>
<label>
<input type="checkbox" name="radio2" id="radio2">
<img id="img2" src="web_bg.jpg" width="200" height="200"/>
</label>
<label id="label">3</label>
</fieldset>
and this is my jQuery script that works:
$('#radio0').click(function() {
if ($(this).is(':checked')) {
$('#img0').css("opacity", "0.5");
} else {
$('#img0').css("opacity", "1");
}
});
$('#radio1').click(function() {
if ($(this).is(':checked')) {
$('#img1').css("opacity", "0.5");
} else {
$('#img1').css("opacity", "1");
}
});
$('#radio2').click(function() {
if ($(this).is(':checked')) {
$('#img2').css("opacity", "0.5");
} else {
$('#img2').css("opacity", "1");
}
});
but i want to put this code in a buckle like this (but this doesn't works):
var text = $('#label').text();
var max = parseInt(text);
for (var i = 0; i < 3; i++) {
$('#radio' + i + '').click(function() {
if ($(this).is(':checked')) {
$('#img' + i + '').css("opacity", "0.5");
} else {
$('#img' + i + '').css("opacity", "1");
}
});
jquery checkbox
edited Nov 26 '18 at 14:24
j08691
166k20192213
asked Nov 26 '18 at 13:56
AjolotzinguiAjolotzingui
81
add a comment |
0
0
0
I need to write scripts in jQuery for checkbox's event's dynamically, this is my html code:
<fieldset>
<label>
<input type="checkbox" name="radio0" id="radio0">
<img id="img0" src="web_bg.jpg" width="200" height="200"/>
</label>
<label>
<input type="checkbox" name="radio1" id="radio1">
<img id="img1" src="web_bg.jpg" width="200" height="200"/>
</label>
<label>
<input type="checkbox" name="radio2" id="radio2">
<img id="img2" src="web_bg.jpg" width="200" height="200"/>
</label>
<label id="label">3</label>
</fieldset>
and this is my jQuery script that works:
$('#radio0').click(function() {
if ($(this).is(':checked')) {
$('#img0').css("opacity", "0.5");
} else {
$('#img0').css("opacity", "1");
}
});
$('#radio1').click(function() {
if ($(this).is(':checked')) {
$('#img1').css("opacity", "0.5");
} else {
$('#img1').css("opacity", "1");
}
});
$('#radio2').click(function() {
if ($(this).is(':checked')) {
$('#img2').css("opacity", "0.5");
} else {
$('#img2').css("opacity", "1");
}
});
but i want to put this code in a buckle like this (but this doesn't works):
var text = $('#label').text();
var max = parseInt(text);
for (var i = 0; i < 3; i++) {
$('#radio' + i + '').click(function() {
if ($(this).is(':checked')) {
$('#img' + i + '').css("opacity", "0.5");
} else {
$('#img' + i + '').css("opacity", "1");
}
});
jquery checkbox
edited Nov 26 '18 at 14:24
j08691
166k20192213
asked Nov 26 '18 at 13:56
AjolotzinguiAjolotzingui
81
I need to write scripts in jQuery for checkbox's event's dynamically, this is my html code:
<fieldset>
<label>
<input type="checkbox" name="radio0" id="radio0">
<img id="img0" src="web_bg.jpg" width="200" height="200"/>
</label>
<label>
<input type="checkbox" name="radio1" id="radio1">
<img id="img1" src="web_bg.jpg" width="200" height="200"/>
</label>
<label>
<input type="checkbox" name="radio2" id="radio2">
<img id="img2" src="web_bg.jpg" width="200" height="200"/>
</label>
<label id="label">3</label>
</fieldset>
and this is my jQuery script that works:
$('#radio0').click(function() {
if ($(this).is(':checked')) {
$('#img0').css("opacity", "0.5");
} else {
$('#img0').css("opacity", "1");
}
});
$('#radio1').click(function() {
if ($(this).is(':checked')) {
$('#img1').css("opacity", "0.5");
} else {
$('#img1').css("opacity", "1");
}
});
$('#radio2').click(function() {
if ($(this).is(':checked')) {
$('#img2').css("opacity", "0.5");
} else {
$('#img2').css("opacity", "1");
}
});
but i want to put this code in a buckle like this (but this doesn't works):
var text = $('#label').text();
var max = parseInt(text);
for (var i = 0; i < 3; i++) {
$('#radio' + i + '').click(function() {
if ($(this).is(':checked')) {
$('#img' + i + '').css("opacity", "0.5");
} else {
$('#img' + i + '').css("opacity", "1");
}
});
jquery checkbox
jquery checkbox
edited Nov 26 '18 at 14:24
j08691
166k20192213
asked Nov 26 '18 at 13:56
AjolotzinguiAjolotzingui
81
edited Nov 26 '18 at 14:24
j08691
166k20192213
asked Nov 26 '18 at 13:56
AjolotzinguiAjolotzingui
81
edited Nov 26 '18 at 14:24
j08691
166k20192213
edited Nov 26 '18 at 14:24
j08691
166k20192213
edited Nov 26 '18 at 14:24
j08691
166k20192213
166k20192213
asked Nov 26 '18 at 13:56
AjolotzinguiAjolotzingui
81
asked Nov 26 '18 at 13:56
AjolotzinguiAjolotzingui
81
asked Nov 26 '18 at 13:56
AjolotzinguiAjolotzingui
81
81
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
You should use classes:
$('.radio').click(function() { // give your radios a class of radio
var $thisRadio = $(this), // get current radio
$thisImage = $thisRadio.next('.image'); // get corresponding image to the radio (I have given images a class of image)
if ($thisRadio.is(':checked')) {
$thisImage.css("opacity", "0.5");
} else {
$thisImage.css("opacity", "1");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<label>
<input type="checkbox" name="radio0" id="radio0" class="radio">
<img id="img0" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label>
<input type="checkbox" name="radio1" id="radio1" class="radio">
<img id="img1" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label>
<input type="checkbox" name="radio2" id="radio2" class="radio">
<img id="img2" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label id="label">3</label>
</fieldset>Please also note - radio buttons in the same group should have the same name, otherwise you may as well use a checkbox
answered Nov 26 '18 at 14:06
PetePete
41.2k1876118
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53482662%2fwrite-jquery-scripts-dynamic%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You should use classes:
$('.radio').click(function() { // give your radios a class of radio
var $thisRadio = $(this), // get current radio
$thisImage = $thisRadio.next('.image'); // get corresponding image to the radio (I have given images a class of image)
if ($thisRadio.is(':checked')) {
$thisImage.css("opacity", "0.5");
} else {
$thisImage.css("opacity", "1");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<label>
<input type="checkbox" name="radio0" id="radio0" class="radio">
<img id="img0" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label>
<input type="checkbox" name="radio1" id="radio1" class="radio">
<img id="img1" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label>
<input type="checkbox" name="radio2" id="radio2" class="radio">
<img id="img2" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label id="label">3</label>
</fieldset>Please also note - radio buttons in the same group should have the same name, otherwise you may as well use a checkbox
answered Nov 26 '18 at 14:06
PetePete
41.2k1876118
add a comment |
0
You should use classes:
$('.radio').click(function() { // give your radios a class of radio
var $thisRadio = $(this), // get current radio
$thisImage = $thisRadio.next('.image'); // get corresponding image to the radio (I have given images a class of image)
if ($thisRadio.is(':checked')) {
$thisImage.css("opacity", "0.5");
} else {
$thisImage.css("opacity", "1");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<label>
<input type="checkbox" name="radio0" id="radio0" class="radio">
<img id="img0" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label>
<input type="checkbox" name="radio1" id="radio1" class="radio">
<img id="img1" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label>
<input type="checkbox" name="radio2" id="radio2" class="radio">
<img id="img2" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label id="label">3</label>
</fieldset>Please also note - radio buttons in the same group should have the same name, otherwise you may as well use a checkbox
answered Nov 26 '18 at 14:06
PetePete
41.2k1876118
add a comment |
0
0
0
You should use classes:
$('.radio').click(function() { // give your radios a class of radio
var $thisRadio = $(this), // get current radio
$thisImage = $thisRadio.next('.image'); // get corresponding image to the radio (I have given images a class of image)
if ($thisRadio.is(':checked')) {
$thisImage.css("opacity", "0.5");
} else {
$thisImage.css("opacity", "1");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<label>
<input type="checkbox" name="radio0" id="radio0" class="radio">
<img id="img0" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label>
<input type="checkbox" name="radio1" id="radio1" class="radio">
<img id="img1" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label>
<input type="checkbox" name="radio2" id="radio2" class="radio">
<img id="img2" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label id="label">3</label>
</fieldset>Please also note - radio buttons in the same group should have the same name, otherwise you may as well use a checkbox
answered Nov 26 '18 at 14:06
PetePete
41.2k1876118
You should use classes:
$('.radio').click(function() { // give your radios a class of radio
var $thisRadio = $(this), // get current radio
$thisImage = $thisRadio.next('.image'); // get corresponding image to the radio (I have given images a class of image)
if ($thisRadio.is(':checked')) {
$thisImage.css("opacity", "0.5");
} else {
$thisImage.css("opacity", "1");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<label>
<input type="checkbox" name="radio0" id="radio0" class="radio">
<img id="img0" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label>
<input type="checkbox" name="radio1" id="radio1" class="radio">
<img id="img1" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label>
<input type="checkbox" name="radio2" id="radio2" class="radio">
<img id="img2" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label id="label">3</label>
</fieldset>Please also note - radio buttons in the same group should have the same name, otherwise you may as well use a checkbox
$('.radio').click(function() { // give your radios a class of radio
var $thisRadio = $(this), // get current radio
$thisImage = $thisRadio.next('.image'); // get corresponding image to the radio (I have given images a class of image)
if ($thisRadio.is(':checked')) {
$thisImage.css("opacity", "0.5");
} else {
$thisImage.css("opacity", "1");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<label>
<input type="checkbox" name="radio0" id="radio0" class="radio">
<img id="img0" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label>
<input type="checkbox" name="radio1" id="radio1" class="radio">
<img id="img1" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label>
<input type="checkbox" name="radio2" id="radio2" class="radio">
<img id="img2" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label id="label">3</label>
</fieldset>$('.radio').click(function() { // give your radios a class of radio
var $thisRadio = $(this), // get current radio
$thisImage = $thisRadio.next('.image'); // get corresponding image to the radio (I have given images a class of image)
if ($thisRadio.is(':checked')) {
$thisImage.css("opacity", "0.5");
} else {
$thisImage.css("opacity", "1");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<label>
<input type="checkbox" name="radio0" id="radio0" class="radio">
<img id="img0" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label>
<input type="checkbox" name="radio1" id="radio1" class="radio">
<img id="img1" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label>
<input type="checkbox" name="radio2" id="radio2" class="radio">
<img id="img2" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
</label>
<label id="label">3</label>
</fieldset>answered Nov 26 '18 at 14:06
PetePete
41.2k1876118
edited Nov 26 '18 at 14:12
answered Nov 26 '18 at 14:06
PetePete
41.2k1876118
answered Nov 26 '18 at 14:06
PetePete
41.2k1876118
answered Nov 26 '18 at 14:06
PetePete
41.2k1876118
41.2k1876118
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53482662%2fwrite-jquery-scripts-dynamic%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
