CODEWITHSUNDEEP
javascriptjqueryasp.net
HecticHiccups
HecticHiccups

Reputation: 25

Create a checkbox when checked it should show certain input fields & hide other input fields, within a Modal

<input type="checkbox" runat="server" name="Seasonal" value="Seasonal" id="isASeasonal" onclick=" if ($(this).is(':checked')) { console.log('Worky'); $('#ShowIfChecked').show(); $('#HideIfChecked').hide(); } else { $('#HideIfChecked').show(); console.log("No Worky"); }" />

I've been attempting to do this with jQuery, but it hasn't been functioning properly, I have also done a thorough amount of research for ways to condense this code. I was trying to condense the statement with a ternary operator. If you could please assist me with a possible solution that would be great! Thanks (Ternary Solution would be amazing)

Upvotes: 1

Views: 189

Answers (4)

HecticHiccups
HecticHiccups

Reputation: 25

Seasonal Address:&nbsp <input type="checkbox" runat="server"  clientidmode="Static" name="Seasonal" value="Seasonal" id="isASeasonal"/>

$('#ShowIfChecked').hide(); //Hid What needs to be shown if checked.
$("#isASeasonal").click(function () { //Used Click event on checkBox
($("#isASeasonal").is(':checked')) ? (console.log('worky'), $('#ShowIfChecked').show(), $('#HideIfChecked').hide()) : (console.log('no worky'), $('#HideIfChecked').show(), $('#ShowIfChecked').hide());

What fixed my issue was that in ASP.net I needed to add clientidmode="static" to the div's that I was trying to hide & show. I still don't understand the reason why, I'm currently looking more into it but this is what worked for me but above you can see the majority of the final product with the ternary operator!! Yay.

Upvotes: 0

Rinktacular
Rinktacular

Reputation: 1126

You can change your onclick to a function, because at least for me, it is easier to see whats really going on.

So change

 <input type="checkbox" runat="server" name="Seasonal" value="Seasonal" id="isASeasonal" 
       onclick=" if ($(this).is(':checked')) { console.log('Worky'); $('#ShowIfChecked').show(); $('#HideIfChecked').hide(); } 
       else { $('#HideIfChecked').show(); console.log("No Worky"); }" />

to

<input type="checkbox" runat="server" 
    name="Seasonal" value="Seasonal" id="isASeasonal" onclick="myFuncton(this)" />

Within your view:

<script>
    myFunction(myCheckBox)
    {
        if(myCheckBox.Checked)
        {
           console.log('Worky'); 
           $('#ShowIfChecked').show(); 
           $('#HideIfChecked').hide(); 
        } 
        else 
        { 
           $('#HideIfChecked').show(); console.log("No Worky");
        }  
    }
</script>

Now to get the expression/Ternary Solution you want, you can change this script to look like this:

<script>
    myFunction(myCheckBox)
    {
       myCheckBox.Checked ? (console.log('Worky'), $('#ShowIfChecked').show(), 
           $('#HideIfChecked').hide()); :  ($('#HideIfChecked').show(), console.log("No Worky"));
    }
</script>

You can find more Info about Ternary Solutions here

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337600

The issue with your code is that you have mis-matched quotes in the HTML due to the console.log("X") calls in your code that is messing up the attributes of the input element. If you check the console you'll most likely see some errors relating to this.

It's for this reason, amongst many others, that it's considered bad practice to use inline script (or CSS styling for that matter). The other issues are that it's bad for separation of concerns and makes the code harder to read an edit. It's far better practice to attach your event handlers using unobtrusive Javascript, like this:

$('.seasonal-checkbox').change(function() {
  $('#ShowIfChecked').toggle(this.checked);
  $('#HideIfChecked').toggle(!this.checked);
});
#ShowIfChecked {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" runat="server" name="Seasonal" value="Seasonal" id="isASeasonal" class="seasonal-checkbox" />

<div id="ShowIfChecked">Checked!</div>
<div id="HideIfChecked">Not Checked!</div>

Note the use of the change event over click, so that the event is still fired for user who navigate the web using the keyboard. Also note the simplified logic using toggle() to hide and show the relevant content in a single call to each method which negates the need for an if statement - and by proxy a ternary expression too.

Upvotes: 3

Dexion
Dexion

Reputation: 1101

We dont write code like this. It fails on every code review.

Do this:

$('#isASeasonal').click(function() { ...});

https://api.jquery.com/click/

Upvotes: 0

Related Questions