[英]Change Text if checked - checkbox
I have a checkbox with a explanatory Text: 我有一个带有说明文字的复选框:
<%= f.label :is_company do %>
<%= f.check_box :is_company %> <span>Are you Representing a Company / Organization ?</span>
<% end %>
I need to change the text (if checkbox is triggered) from Are you Representing a Company / Organization ?
我需要从
Are you Representing a Company / Organization ?
更改文本(如果触发了复选框) Are you Representing a Company / Organization ?
to I'm representing a Company / Organization !
I'm representing a Company / Organization !
Can anyone help me out ? 谁能帮我吗 ?
HTML Output : HTML输出:
<label for="user_is_company">
<input name="user[is_company]" type="hidden" value="0">
<input id="user_is_company" name="user[is_company]" type="checkbox" value="1">
<span>Are you Representing a Company / Organization ?</span>
</label>
I work in coffeescript 我写咖啡
So i made this abomination: 所以我做了这个可憎的事情:
$(document).on "ready page:load", ->
check = ->
if input.checked
document.getElementById("label_cmp").innerHTML = "I am representing a Company / Organization !"
else
document.getElementById("label_cmp").innerHTML = "Are you representing a Company / Organization ?"
input = document.querySelector("input[type=checkbox]")
input.onchange = check
check()
but i think its a lot of code, for nothing... 但我认为它很多代码,一无是处...
Something like this should work. 这样的事情应该起作用。 If it doesn't, have a play and tweak, then come back if you still have trouble.
如果没有,请尝试一下并进行调整,如果仍有问题,请回来。
$(document).on "ready page:load", ->
$("input#user_is_company").on 'change', ->
if $(this).is(":checked")
$("#label_cmp").text("I'm representing a Company / Organization !")
else
$("#label_cmp").text("Are you Representing a Company / Organization ?")
Note: there is possibly an even shorter way to do this with jQuery toggle
, but I have limited knowledge of JS. 注意:使用jQuery
toggle
可能有更短的方法,但是我对JS的了解有限。
$ ->
$("#user_is_company").on 'change', ->
$("#label_cmp").text if $(this).is(":checked") then "I am representing a Company / Organization !" else "Are you representing a Company / Organization ?"
Compiles to... 编译为...
$(function() {
return $("#user_is_company").on('change', function() {
return $("#label_cmp").text($(this).is(":checked") ? "I am representing a Company / Organization !" : "Are you representing a Company / Organization ?");
});
});
Demo: http://jsfiddle.net/VcFCL/ 演示: http : //jsfiddle.net/VcFCL/
Some comments on my code choices... 关于我的代码选择的一些评论...
# jquery shorthand form for on-ready wrapper function
# ensures DOM is loaded before executing inner function
$ ->
# identify elements by ID alone, as ID should be unique on the page
# listen for `change` event on selected element, and run callback
$("#user_is_company").on 'change', ->
# set the text of the label conditionally by the `checked` status of the selected element
$("#label_cmp").text if $(this).is(":checked") then "I am representing a Company / Organization !" else "Are you representing a Company / Organization ?"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.